Center my footer within main element
so basically, I want my footer and main both to be included within 100viewport height, whilst also putting the footer and the very bottom of the viewport height.
I tried adjusting the main's vh to somewhere between 90-100 to get the footer inside the view but ofc it wouldn't work if we resize the windows vertically
below is the link for the code
https://codepen.io/kaedaDante/pen/jOxwqxr
33 Replies
I would stay away from vh honestly.
the window object which is where the DOM is inserted into has an innerheight
if we (inside of the CSS) set the html + body element to 100%, it will be 100% of the window height.
This prevents silly issues like islands or other physical limitations on a mobile from impacting the user of your site
what you can do is use flexbox, set the elements into flex-direction: column.
then give each of the elements a flex-basis
this will take up all available space and keep them set out properly
or by using grid, you can set up a grid and place the elements where needed
I am confused by you giving main a min-height of 100vh though?
yeah, i initially didn't have main and footer separated, and afterwards i thought it would be nice to separate them with main and footer
i gave main 100vh because i wanted it to occupy the entire vh, but i'm also trying to chuck in the footer within it
https://codepen.io/b1mind/pen/PojdyQz (*updated to use % not vh but still same idea)
i tried to get it out the document flow but giving a position absolute/fixed
whilst i could do that, i couldn't center it in the horizontally
you've nested it inside a div, which in my case is the main element, yes? but i dont suppose I should add footer inside my main element?
a bit of feedback on your CSS code.
never set a font-size in pixels.
the browser comes with the option for a user to have their own preferred font-size. You setting a font-size of 15px means that they no longer have that choice.
If that person had vision issues, this would make your site impossible to use.
so set font-size to a relative unit such as rem
i.e. 1rem = 16px this is default, but it can scale depending on user settings
min-content can cause problems
as per the docs: https://developer.mozilla.org/en-US/docs/Web/CSS/min-content
I would suggest using a different width, or even just allowing block level elements to be the 100% width they are by default
Your footer needs a width
min-content - CSS: Cascading Style Sheets | MDN
The min-content sizing keyword represents the intrinsic minimum width of the content. For text content this means that the content will take all soft-wrapping opportunities, becoming as small as the longest word.
Yes you could have a footer of a main
here, i havent touched your html.
have updated your css to use % instead of VH
https://codepen.io/CA-Carl/pen/abGwZyM
thanks for the feedback, really appreciate it. whilst i didnt wanna use pixels. this frontend mentor exercise states that my font size should be 15px
Don't follow their bad practices, CoderCarl is just trying to advice yea better practices
FEM has horrible practices in lots of the early templates, unless you are doing one from some one like say Kevins space one I don't really trust their defaults.
this is why I hate some exercises. Are you on the paid version? Cause otherwise the feedback they give is usually to use what is needed
no, unfortunately not
i'm using their free service
great! then use the actual best practice of using responsive font-sizes.
they can say something about using a set font size if they like but that is literally just going to be preventing people from using the site
mobile 375px drives me nuts too
shoot for mins of 360 if not 320
rofl :"D media queries in px yes
i shouldn't be doing that?
yea you can convert to
em
px is fine though, you can read into why em is better in this case is really safari being odd ?i just looked it up from w3schools
what's the difference?
320 is a safe min, would cover most all devices. onlything smaller is 280px
em is a measurement that is relative to it's parent.
if you have a media query each em will be 16px
if you have a mobile device or even some laptops/ desktops tthey can have different sized pixels
mmmm na its something todo with safari I think no? CSS pixesl are not device pixels
lemmi find Zels article
screens the same physical size will have different pixel sizes
yes.
all of the browsers treat the pixels measurements slightly differently. Safari more than others because they are using a different measurement tool
same reason why safari colour gammut is different to the colours on other devices
PX, EM or REM Media Queries? | Zell Liew
Have you wondered if you should use
px, em or rem for media queries? I had the same question too, and I never figured it out, not till now. When I first created the mappy-breakpoint library, I used rem units. Then [after ayea that one
So if you are not doing an exact breakpoint px is fine
>.>;;
its a pretty good article but it is slightly dated now, AFAIK safari still has these issues as they are technically more correct than others
will give it a thorough read
i do have 1 concern with media queries
dont worry too much, the accepted practice ends up using em rather than px.
so when i say
@media only screen and (max-width: 425px)
and then i have my responsive styles below, i'm basically asking it to render such styles below said pixels, right? so if i set it to let's say 320. my website will look as it does on the desktop, yes?
as in, i'd have to go below 320 to start seeing that responsiveness
i was initially thinking of going with a higher value, say 600 so that my image rescales from thereonYea put it where it breaks 😄
"breakpoint" whaza
to be honest if you remove min-content from the container class
add a responsive width to the .qr-code, you no longer need the media query
i.e.
will experiment will all this. thank you
if i have further questions regarding this, do i comment here, or open a new thread
new thread for new questions.
and sorry for the information vomit
no, its fine. i just need to be aware of stuff and then i can look things up from thereon
i'll break it down to centering my footer first, by trying out b1mind's example, as well as yours. and then experiment with the media query after reading the blog