Removed Content Was Here
I havent looked at everything, but one issue you have is your mixing your media query’s. You never add a ending brace before you start your next media query
nav a:hover::before {
transform: scale(1, 1);
}
}//you need to add this brace before your second media query
I can scroll down on smaller screens the only big problem is your rose petal logo covers the hamburger icon when it gets to small. The weird thing is you start the navbar on the right, and then move it over to left when it gets small
1 Like
Also for your footer. I dont see any selector for it with your 800px and above media query. It looks like you only focus on the nav mainly.
Last thing. You are not doing anything with your social media icons. Its up to you, but just adding below has it centered, and at the bottom where its not covering anything up. Thats for the 800px and up. You have the same issue at lower screens
margin-top: 550px;
If not put in the 800px media query, wouldn’t it just take the form of the footer that I have above the media queries,for the mobile first?
I apologize I got mixed up trying things out. I added that to the social class not the media query’s. My screen is bigger than 800px, so that’s why I thought I put it in the 800 media query. you’re right when you say that it would take the form of the footer. However that puts it in the upper middle of the page
I just can’t figure out if it’s the content being pushed down into it or the footer floating up into it for the regular non media query(mobile).
after a certain point if you make the screen smaller, look at the footer. The content starts to go into the red footer.
It looks like you fixed the footer problem for larger screens without that massive margin-top. Why not use the same styling when the screen gets smaller? What did you do to solve that? The problem now is your navbar is way to big that its cutting off the beginning text for larger screens
I have my content overflowing into my footer
and the mobile layout is all messed up below 800px.
Need some walking through all of this, I’m lost.
I don’t understand what you mean by content overflowing into footer.
Your navbar is also being cutoff when screen is getting smaller too.
What do you need help with when screen is smaller than 800px?
@shimphillip here’s his original post if you want to skim through it. Not much more explaining here, but maybe you can see what he’s saying
As far as i understood, try giving the .social a max-width: 500px and check the behaviour in smaller screen
1 Like
That worked for the footer icons, I tried it with the .logo and the logo is still too wide on smaller screens.
Try reducing the width of logo and take it to the right.
I’v tried mess with the width in multiple places. It will only change on the desktop bigger size, mobile…the logo still cuts off screen.
Also, somehow all my social media icons are now pushed to the right side of the white circles when on mobile.
To get your logo smaller in mobile screens, try setting the media query for that,
Ex: try setting media query at,
@media (max-width: 500px) { } and set the width for your logo as 200px or any value lesser accordingly.
When i see, the logo’s are centered to the white circle.
yes, this is one of the most common issue which is actually menioned in this article, I also face the same issue to my Hp support Number website, But I didn’t found any solution of this can anyone sugget me any solution?
nah, not working. Sigh…CSS is such a pain.