Issue
I have a simple issue with a Shopify store. I've installed a fixed header and added a top padding of 50px
to the PageContainer
so that the header doesn't overlap with the main content. However, this results in 50px
of extra space on mobile, which is too much.
I would be very grateful if you could help me set two different top paddings, one for desktop and one for mobile. How can I set the top padding of PageContainer
to be equal to the exact height of the header, regardless of the screen resolution? Alternatively, is there a way to set different padding for each resolution, perhaps using media queries?
I started learning about this only three days ago, but I'm quickly learning through Google searches. I've also found a solution to this issue, which involves moving the header to its own fixed wrapper, but I'm not sure how to implement it.
/* Sticky header */
header.site-header {
position: fixed;
z-index: 99999;
background-color: #fff;
width: 100%;
top: 0;
left: 0;
right: 0;
-webkit-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.36);
-moz-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.36);
box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.36);
}
/* Page Container */
#PageContainer {
overflow: hidden;
padding-top: 50px;
height: 100%;
}
<div class="header.site-header">
<div class="PageContainer is-moved-by-drawer">
This is the fixed header content.
</div>
</div>
<div class="PageContainer is-moved-by-drawer">
This is the page content.
</div>
Solution
What you want to do is make use of CSS Media queries, which will allow you to define different styles for different device sizes, so you can define a #PageContainer
style for desktop/laptop/tablet sizes, and you can define the same #PageContainer
style differently for phones.
These are the default Bootstrap media query breakpoints:
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}
So for your application, what you want to do is define #PageContainer
for large devices as 50px
padding, and for small devices at maybe 20px padding, and maybe even 40px
on medium sized screens. So something like this in your CSS
#PageContainer {
overflow: hidden;
height: 100%;
}
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
#PageContainer {
padding-top: 20px;
}
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
#PageContainer {
padding-top: 20px;
}
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
#PageContainer {
padding-top: 30px;
}
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
#PageContainer {
padding-top: 50px;
}
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
#PageContainer {
padding-top: 50px;
}
}
You really only need the smallest and largest @media
block, but I've included all of them so you can see what the different breakpoints are and experiment.
You define the core styles, the attributes that will be the same no matter what screen size first outside of the @media
blocks so you're not repeating yourself unnecessarily, and then define the padding on the same style inside the @media
blocks, and the browser will combine the global attributes with the @media
specific attribute for the current screen size to style the content.
More information
- How does the CSS
@media
rule work? - MDN Docs
Answered By - Stephen R. Smith
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.