I have a style like this
//inside page.jsx
export function Page() {
return (
<div css={container}>
<div css={header}>
<div css={horizontal}>
<Menu
mode="horizontal"
>
<Menu.Item>
<Link href="#>
<a>Menu A</a>
</Link>
</Menu.Item>
</Menu >
</div>
</div>
</div>
)
}
//inside styles.js
export const horizontal = css`
display: none;
#media (min-width: 720px) {
display:block;
}
`
export const header= css`
height: 10%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
background-color: white;
position: sticky;
top: 0;
z-index: 1;
`
When testing the browser with a size less than 720px its works as intended the content is invisible because of display none, but when the browser size is back to more than 720px it's not working at all (not going back to visible).
if I replace the Menu component with another component the style is working properly (when less than 720px = invisible and when more than 720px = visible). Also, it can work with the Menu component if removing display flex in the header style.
I'm a bit confused about what going on here.
Related
My nav bar is showing up overlapped with bullet points and 'HiOutlineMenuAlt4' icon is not appearing either. I am not sure what to do, I can't identify where the issue actually lies? Is it in the css?
Navbar.js
import React from 'react'
import {BiSearch} from 'react-icons/bi'
import {BsPerson} from 'react-icons/bs'
import {HiOutlineMenuAlt4} from 'react-icons/hi'
import './NavbarStyles.css'
function Navbar() {
return (
<div className='navbar'>
<div className='logo'>
<h2>BEACHES. </h2>
</div>
<ul className='nav-menu'>
<li>Home</li>
<li>Destinations</li>
<li>Travel</li>
<li>Book</li>
<li>Views</li>
</ul>
<div className='nav-icons'>
<BiSearch className='icon'/>
<BsPerson className='icon'/>
</div>
<div className='hamburger'>
< className='icon' />
</div>
</div>
)
}
export default Navbar
NavbarStyles.css
.navbar{
width: 100%;
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 1rem;
z-index: 2;
}
.nav-menu {
display: flex;
}
.hamburger{
display: none;
padding: 1rem;
}
No problems are listed so hard to decipher what to do next
Hi #Steph G,
About your icons HiOutlineMenuAlt4.
You are not using the imported HiOutlineMenuAlt4 icon in the hamburger div
<div className='hamburger'>
<HiOutlineMenuAlt4 className='icon' />
</div>
And about your CSS, that code is enough.
.navbar {
display: flex;
justify-content: center;
align-items: center;
}
Goal: Align items centrally in div
See picture here (notice every watch is shifted to the left):
I'm trying to render each item in productcard centrally.
Currenty, each productCard__container renders to left.
Here is my ProductCard.js code:
return (
<div className="productcard">
<button onClick={(e) => history.push(`/product/${id}`)}>
<div className="productCard__container">
<img src={image} />
<h1>{brand}</h1>
<h2>{name}</h2>
<p>${price}</p>
</div>
</button>
</div>
...and the CSS code:
.productcard {
margin: 10px;
border-radius: 12px;
background-color: black;
}
.productCard__container {
align-items: center;
}
You can use css flex box
.productcard {
display: flex;
justify-content: center;
}
I would like to update my header to use flex box. I want to have an icon, then 4 A tag links on the left, and then two tags on the right with an image inside of them. When I go to set align-self on any of the items it moves up and down, not left and right as I was expecting. Please help.
function renderSections() {
return sections.map((section, i) => {
let sect = section.toString();
if (i !== 0) {
return (
<p className="HeadLink" onClick={() => scrollToSection(sect)}>
{section}
</p>
);
} else {
return (
<p className="HeadLink" key={section}>
{section}
</p>
);
}
});
}
return (
<HeadCon id="HeadCon">
<img alt="logo" className="logo" src={logo} />
{renderSections()}
<a className="project-icon-link" href="/#/weather">
<img alt="Gove Weather" className="project__icon" src={weather} />
</a>
<a className="project-icon-link" href="/#/SuperHeroSmackDown">
<img
alt="Super Hero Smack Down"
className="project__icon"
src={superHSD}
/>
</a>
</HeadCon>
);
export const HeadCon = styled.div`
* {
box-sizing: border-box;
}
display: flex;
flex-direction: row;
width: 100%;
align-items: center;
position: -webkit-sticky;
position: sticky;
text-align: left;
height: 70px;
top: 0;
right: 0;
left: 0;
/* border: 2px solid orange; */
background: black;
.project-icon-link {
align-self: flex-end;
}
I don't think this can be done with align-self. Put margin-left: auto on the first element that's supposed to be on the right, or margin-right: auto on the last element on the left. Alternatively, wrap the left side and the right side in their own flex containers and put justify-content: space-between on the flex container housing the left and right flex containers.
The arrows don't display. Instead "PREV" and "NEXT" text show in their place.
I've confirmed that the swiper.css is loading. The PREV and NEXT texts are functioning correctly. Clicking them changes the images and also mobile swipe gesture functions as expected.
EDIT: codepen is here: https://codepen.io/davrosfl/pen/OJJPegm
It's strange, it works fine in codepen, but not on my local machine. Same code.
import Swiper from 'swiper';
import './Project2.css';
import 'swiper/css/swiper.css';
class Project2 extends Component {
componentDidMount() {
this.mySwiper = new Swiper('.swiper-container', {
effect: 'fade',
fadeEffect: {
crossFade: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
observer: true,
observeParents: true
});
}
render() {
return (
<div className="swiper-container" ref={div => this.carouselRef = div}>
<div className="swiper-wrapper">
<div className="swiper-slide">
<img src={`${process.env.PUBLIC_URL}/images/01.jpg`} />
</div>
<div className="swiper-slide">
<img src={`${process.env.PUBLIC_URL}/images/02.jpg`} />
</div>
</div>
<div className="swiper-button-prev"></div>
<div className="swiper-button-next"></div>
</div>
)
}
}
export default Project2;
CSS
.swiper-container {
height: calc( (var(--vh, 1vh) * 100) - 10.75vh );
width: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
I want the navigation arrows to display instead of "PREV" and "NEXT"
Placing text-transform: uppercase; in the style of the body tag will produce this bug. For ex:
body {
text-transform: uppercase;
}
I'm not sure where I messed up so I can't scroll to top when I click a HOME anchor on navigation bar on top of screen. For example, I can scroll to CONTACT page when I click the anchor from HOME page, but when I try to go back to HOME page by clicking the HOME anchor, it stops at between HOME page and second page, not all the way up. I tried anything I know and I can google but with no luck.
This is my app.js
import ScrollableAnchor from 'react-scrollable-anchor'
<Router>
<div className="App">
<div className="App-header">
<div className="navigationLists">
{navList}
</div>
<ScrollableAnchor id={'HOME'} >
<Home />
</ScrollableAnchor>
</div>
<ScrollableAnchor id={'CONTACT'}>
<Contact />
</ScrollableAnchor>
</div>
</Router>
This is my App.scss:
.App {
text-align: center;
.App-header {
position: relative;
height: 650px; // This might need to change
min-height: 500px;
width: 100%;
background: #161415 url(./images/aha.gif) no-repeat top center;
background-size: contain ;
-webkit-background-size: cover !important;
text-align: center;
overflow: hidden;
.navigationLists {
width: 80%;
margin: 2% 10%;
display: flex;
justify-content: space-around;
list-style-type: none;
position: fixed;
top: 0;
}
}
}
Thank you in advance!
The answer is the structure is important, or you will have hard time to debug CSS, please go look up Jayffe's example