How to get rid of excess white space in shopify article template (debut theme)

I hope all is swell, Shopify Community.

Currently, I am working on making my article templates look more modern. Currently, I am trying to get rid of excess white space. Picture below best describes the situation.

Hi @schoe3 ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

No problem. It is not protected; it is live. I know this is not a good practice.

https://pholder.xyz/blogs/reflections/our-strategy-to-1000-twitter-followers

In addition, I notice how much whitespace occurs on my landing page. Is it possible to get rid of that too?

I have noticed that it looks fine when the width setting is normal. I forget that I am looking at it from a widescreen setup. Is there a way where the white space can look consistent if it was viewed in a phone?

Could you help me on this @AvadaCommerce ?

Hi @schoe3 ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css->paste below code at the bottom of the file:
.template-article .grid__item {
    left: 0 !important;
    width: 100% !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

Hi @AvadaCommerce the code worked great. If you have the time, how does the class grid item work? If you don’t, where would you study grid-items CSS?

Regardless, thank you @AvadaCommerce

Hi @schoe3 ,

You can try refer this link

Hope it can help you. ^^

I have never seen this before. A CSS grid generator. I will play around with the Grid Garden exercise.

Thank you @AvadaCommerce .

I appreciate it :slightly_smiling_face: