How to style the index blog page?

[jeremy4]

Hello, I know this must be elementary, but I’m having difficulty styling the index blog page. I’d like everything underneath the top slide to have some left and right padding. In Cornerstone I don’t have any sections added for that page, as they would be extraneous, thus I don’t have the ability to make those adjustments within Cornerstone. Consequently, I tried identifying the selectors and styling directly in the CSS but I can’t seem to be able to find the appropriate selectors. Any help please?

[nico]

Hi @jeremy4,

Thanks for writing in.

Yes, using CSS we could adjust your index blog pages spaces. However in your situation, I am not sure which part are you trying to adjust. Would you mind sharing us the URL of the page and the screenshot of the adjustment that you want to achieve.

Once we full understand your setup, we’ll do our best to help.

Thanks.

[jeremy4]

Hi @nico, the page seems to look ok on desktop but once sized down to mobile/on a mobile device there’s no space between the edge of the text and the window. I have a attached a screenshot for reference. Thank you!

[The_E_Blog]

You can also try to set Up an alternative Blogindex by using The Grid or Essential Grid. Here my Blog List as example https://www.purzls.net/blogpage/

[mldarshana]

Hi There @jeremy4

Could you please provide us with the URL to your blog page, so that we can take a closer look.

In the meantime, you can also try what @The-E-Blog has mentioned. You can access knowledge base articles from here (https://theme.co/apex/forum/t/extension-the-grid/74) or (https://theme.co/apex/forum/t/extension-essential-grid/68).

Thanks!

[jeremy4]

Thank you both @The-E-Blog and @mldarshana, the Grid and Essential Grid both look very versatile! Honestly, though, I only needed to know which selector to target the area beneath the top slider, and I found that it is simply .x-main

I went ahead and added the following to the index blog CSS and it renders perfectly in Cornerstone! But when I save it and view the site it doesn’t appear to be working. All cache has been cleared. Any thoughts?

.x-main {
padding-left: 2em;
padding-right: 2em;
}

I then tried adding the .blog selector to the same code and put it in the Global CSS to no avail. Then I tried putting that same code into the index blog CSS to no avail. In the former, Cornerstone doesn’t render, but in the latter it does. I’ve attached a screenshot:
You can see that I also styled the thumbnails to have a shadow. It all looks so nice in Cornerstone but doesn’t seem to be saving.

[jade]

Hi there,

Instead of adding the custom CSS in the Cornerstone’s content CSS, please try adding it in X > Theme Options > CSS.

Hope this helps.

[jeremy4]

Hi @Jade it’s strange that this didn’t work yesterday but seems to be working now! Many thanks!

[ruenel]

Hey Jeremy,

You’re most welcome. It’s good to know that it is now working. It was probably caching which made it not to work the other day.

Best Regards.