Shopify themes, liquid, logos, and UX
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.
@MagnusE - I see it like this
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.
this did it, thanks a bunch!
User | RANK |
---|---|
64 | |
58 | |
48 | |
42 | |
42 |
Photo by Marco Verch Sales channels on Shopify are various platforms where you can sell...
By Ollie May 25, 2023Summary of EventsBeginning in January of 2023, some merchants reported seeing a large amo...
By Trevor May 15, 2023With 2-Factor Authentication being required to use Shopify Payments, we’re here to help yo...
By Imogen Apr 26, 2023