Minimal Theme Reduce White Space

Solved
Tourist
26 0 0

Minimal theme  - On the home page I would like to reduce the white space between the slider image and the collection images and then also between the collection images and the collection titles.

Thank you!

ReduceWhiteSpace.jpg

0 Likes
Astronaut
1091 150 274

If you could post a link to your store, and the password if it's password protected, that would help us to give you suggestions on what to change.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Tourist
26 0 0
0 Likes

Success.

Astronaut
1091 150 274

You can add this to the bottom of your theme.scss.liquid file in your Assets folder to remove a little padding that is on that featured section:

.index-section {
    padding: 0;
}

That'll get rid of about 45px of whitespace all together. There is some other stuff going on, there is padding on a container of the images that I cannot find anywhere. This includes the white-space between your picture and title,and even if I try to overwrite it nothing happens. I don't suggest it anyway, as a little white space is good for the users eyes. Let me know if you find this satisfactory.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Tourist
26 0 0

Yes, this is prefect!

Thanks so much!


@Ninthony wrote:

You can add this to the bottom of your theme.scss.liquid file in your Assets folder to remove a little padding that is on that featured section:

.index-section {
    padding: 0;
}

That'll get rid of about 45px of whitespace all together. There is some other stuff going on, there is padding on a container of the images that I cannot find anywhere. This includes the white-space between your picture and title,and even if I try to overwrite it nothing happens. I don't suggest it anyway, as a little white space is good for the users eyes. Let me know if you find this satisfactory.


 

0 Likes
Tourist
26 0 0

@Ninthony

 

Hours after I add the code to reduce the white areas, I got a Google Search Console alert - New Mobile Usability issues detected 

The following issues were found on your site:

  • Content wider than screen
  • Clickable elements too close together

I deleted the code now they are validating the fix, it could take a few days to see if it was the code that is causing the problem. the error is only on one product page but it was found yesterday.

 

 

 

0 Likes
Astronaut
1091 150 274

 That's a bit unusual since I don't see that class anywhere except on your index, and it's strange that it would be only on one product page because if that class was in a div on your product page, it would probably be on all of them.  So another solution would be to go into your index.liquid file in your Templates folder and look for the <div> tag that contains your index-section and add another class to it. On my end it looks like this:

 

<div id="shopify-section-collection-list" class="shopify-section index-section">

So to add a class you would just add a space to the end of that and type it like this:

<div id="shopify-section-collection-list" class="shopify-section index-section your-class">

Then in your theme.scss.liquid file where you added that other code you could just do this instead:

.your-class {
padding: 0; 
}

This way it wont conflict with any other element using the index-section class.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Tourist
26 0 0

Thank you, but I only have this in my index.liquid

 

IndexLiquid.jpg

0 Likes
Astronaut
1091 150 274

Ah, that's because all of your content is being generated by your dynamic sections in your Themes > Customize section. I do not know much about sections at all so I can't really advise on editing them, but you COULD do this. Add this into your index.liquid underneath that {{ content_for_index }}:

 

<script>
$('.index-section').addClass('remove-padding');
</script>

then in your theme.scss.liquid file add

.remove-padding{
padding:0;
}

It's a bit of a hacky way to do it, but if it works it works.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Tourist
26 0 0

Thanks so much! 

I'll give to a few days to see if I get any more errors

0 Likes