Blog Layout Adjustments using CSS

Support
#1

Hey ThemeX folks,

Desired Outcome

I would like to achieve a similar structure with my blog setup as shown here.

In essence,

  • main container is centred with a max-width of 62.5 rem (red line)
  • text container is further limited by a 75% width so it creates the additional space (blue line)
  • sub-headings in blue have a negative margin so it stands out from the text container

Then there are breaker sections in new containers that utilise full width.

  1. I am wondering what the optimal utilisation of sections, rows and columns is to create a similar design? What should be set on each level (section, row, column, element)?

  2. It’s cumbersome to utilise inline CSS for each section and apply a max-width. I tried adding a custom CSS class to sections or rows but these values are overwritten. I assume it’s just a CSS selector problem to include children?

  3. I am building this to create a gallery of building blocks so content creators can use these elements later on. So I am aiming for a slim setup where most of the stuff is handled via CSS classes.

  4. I am also struggling to wrap my head around the margin/padding issue going from desktop to mobile. I would like to limit excessive media queries to restate paddings and margins on different devices. Because I think there is a more elegant solution to this? For example, setting the max-width in rem instead of % works well on desktop and mobile without additional media queries.

What I changed so far

  • set the entry-wrap to padding: 0 -> otherwise I thought I cannot have full-width sections in between
  • set the site layout in the theme settings to full-width with a max width of 1920px and the site width to 100%.

Hope you can assist me? :pray::slight_smile:

Best
Adrian

#2

Hi There,

Based on your comments you are on a good path. All you said is correct.

You should create classes with the class you need to use around your sections.

I also recommend you creating a Cornerstone Template once you have your first post ready so it will be easier for you to re-create your posts.

Your CSS seems correct, you just need to add more specific selectors or use !important at the end of it.

Unfortunately creating a post on this style will depend on you as we cannot provide this type of customization.

If you face any specific challenge during the process, please let us know.

Thank you

#3

Hi Joao,

thanks for the feedback.
Then I’ll be more specific:

  1. Which class overwrites the .er-margin? I would like to avoid !important tags for the basic layout.

  2. Do you recommend styling margins for different devices using additional css classes that will be added to sections/rows using @media queries or what would be your approach?

Thanks. :pray:
A

#4

Hi,

  1. You can add your custom css in Theme Options > CSS
    By adding it there, it will have priority than all other css and you don’t need to add ! important.

  2. Yes, adding css classes and using media queries is the best approach.

Thanks

#5

Hey Paul,

  1. is exactly what’s not working as the CSS class .er-margin gets overwritten by something else without the !important tag. See the one row with the .er-margin class.

Thx.

#6

Hi There,

It seems that you have set a .htaccess password in order to access your URL. Could you please confirm on your end?

Thanks!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.