Shopify themes, liquid, logos, and UX
To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more
Hi!
Want to remove this white space that appear between the menu and the image (see image below). Website: http://us.dbrisshoes.com/ the site can only be views from the USA. Any ideas? Thanks in advance!
Solved! Go to the solution
This is an accepted solution.
What about this adding this code to theme.scss.liquid, I think the DIV index-sections only applies to the home page:
.index-sections {
margin-top: -30px;
@media screen and (min-width: 769px) {
margin-top: -80px
}
}
If this doesn't work, send me a PM and I can check the theme for you.
Yes , only work in the US or you will be redirected to our main site which looks as it should 🙂
Hi,
The gap is due to padding applied in the CSS file (timber.scss.css), which you can locate in your theme under the assets folder.
In line 306 more or less, you will find this code:
body:not(.template-index) .main-content {
padding-top: 30px; }
@media screen and (min-width: 769px) {
body:not(.template-index) .main-content {
padding-top: 80px; } }
@media screen and (min-width: 591px) {
.main-content {
padding-bottom: 40px; } }
Just change the padding-top values to 0 like this:
body:not(.template-index) .main-content {
padding-top: 0; }
@media screen and (min-width: 769px) {
body:not(.template-index) .main-content {
padding-top: 0; } }
@media screen and (min-width: 591px) {
.main-content {
padding-bottom: 40px; } }
As you can see, there is also a padding-bottom rule that adds a gap of 40px
Hope this helps.
Thanks Alexfc,
This is what the code was in the timber-file:
.main-content {
display: block;
// to be kept before Sections Everywhere
body:not(.template-index) & {
padding-top: $gutter;
@include at-query($min, $large) {
padding-top: $contentTopMargin;
}
}
@include at-query($min, $postSmall) {
padding-bottom: 40px;
}
}
If I changed all of them to 0 the front page looked as a wished, however I still want to keep the padding on other pages.
I've also tried with the following code in theme.scss.liquid file, it made no difference. Any other ideas?
#shopify-section-slideshow{
padding-top: 0px!important;
}
This is an accepted solution.
What about this adding this code to theme.scss.liquid, I think the DIV index-sections only applies to the home page:
.index-sections {
margin-top: -30px;
@media screen and (min-width: 769px) {
margin-top: -80px
}
}
If this doesn't work, send me a PM and I can check the theme for you.
User | RANK |
---|---|
113 | |
87 | |
69 | |
66 | |
46 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022