Customize content width on blog pages only

Support
#1

Hi support team!

I found many suggestions on how to change the content width for blog pages only. But no matter what I tried - it had no effect. Can you please check out why?

Thnaks a lot!

#2

Hi There,

Please try adding this custom CSS under X > Theme Options > CSS:

.blog article .x-container.max.width {
    max-width: 800px;
    width: 100%;
}

Hope it helps :slight_smile:

#3

Thank you Thal, that worked well on the blog index page.
Can you please tell me the code for the post page itself and the archive page?

Thanx!!

#4

Hello @blueprint,

Thanks for asking. :slight_smile:

You can add following CSS under X > Theme Options > CSS:

.single-post .x-container.max.width {
    max-width: 800px;
    width: 100%;
}

.archive .x-container.max.width {
    max-width: 800px;
    width: 100%;
}

Thanks.

#5

Thank you for that code. Is there a modified version so that the navabar is not effected?
The menu is breaking to a second row and the first post title is cut off.

#6

Hi There,

The menu and the post title is absolutely fine on my end.
Can you please check and clarify.

Thanks

#7

The code worked well for the blog INDEX page, but on the single post page the menu breaks into a second row and the post title is cut off.

furthermore the blog Index page and single page have no conainer so that it looks like this on mobile:

#8

Hello There,

You will need to update the code and use this instead:

@media(min-width: 980px) {
  .single-post .x-container.max.width {
    max-width: 800px;
    width: 100%;
  }

  .archive .x-container.max.width {
    max-width: 800px;
    width: 100%;
  }

  .single-post .x-navbar-inner .x-container.width, 
  .archive .x-navbar-inner .x-container.width {
    width: 100%;
    max-width: 100%;
  }
}

We would loved to know if this has work for you. Thank you.

#9

Thank you for that last code. Unfortunately this one has no effect - the pages look the same with or without the code. I tried to change the max-width but it also had no effect…

#10

Hi again,

I tested the previous code and it works fine on my end, can you please try adding it in your Child Theme’s style.css file instead? Make sure to clear all caches after adding the code in your Child Theme.

Let us know how this goes!

#11

I emptied the cache, but it looks the same.
Can you please tell me where I can find the style.css file?

#12

Hello There,

I’ve taken a closer look at your page and it seems that you have inserted a broken custom css.

Please review your custom css and make sure that you have inserted the correct and valid code.

Hope this helps. Kindly let us know.

#13

Thanks a lot! I took different codes from the forum and from all the copy and paste, I messed it up…
regarding the @media block: could you tell me the right code - I don’t know what to use…

Thanks!!

#14

Hi again,

The media block code section should be like this:

@media (min-width: 980px) {
  .single-post .x-container.max.width {
    max-width: 800px;
    width: 100%;
  }

  .archive .x-container.max.width {
    max-width: 800px;
    width: 100%;
  }

  .single-post .x-navbar-inner .x-container.width, 
  .archive .x-navbar-inner .x-container.width {
    width: 100%;
    max-width: 100%;
  }
}

Please replace your corrupted code with this.

Hope this helps!

#15

Thank you, so it is the same media block as before? Still, there are the same problems:
1.On the index page: The content is still too wide. I tried changing the widht but it had no effect.
2. On the single post page:
on mobile screens under 767px there is no container - The logo in the header is bigge and the text has no spacing to the right or left.

Rucht now the code looks like this:

.single-post .x-container.max.width {
    max-width: 800px;
    width: 100%;
  }

  .archive .x-container.max.width {
    max-width: 800px;
    width: 100%;
  }

  .single-post .x-navbar-inner .x-container.width, 
  .archive .x-navbar-inner .x-container.width {
    width: 100%;
    max-width: 100%;
  }

@media (min-width: 980px) {
  .single-post .x-container.max.width {
    max-width: 800px;
    width: 100%;
  }

  .archive .x-container.max.width {
    max-width: 800px;
    width: 100%;
  }

  .single-post .x-navbar-inner .x-container.width, 
  .archive .x-navbar-inner .x-container.width {
    width: 100%;
    max-width: 100%;
  }
}
#16

Hi blueprint,

You only need this CSS snippet with @media code, I’ve update the CSS code already on your website to have only this snippet:

@media (min-width: 980px) {
  .blog article .x-container.max.width {
    max-width: 800px;
    width: 100%;
	}
  .single-post .x-container.max.width {
    max-width: 800px;
    width: 100%;
  }

  .archive .x-container.max.width {
    max-width: 800px;
    width: 100%;
  }

  .single-post .x-navbar-inner .x-container.width, 
  .archive .x-navbar-inner .x-container.width {
    width: 100%;
    max-width: 100%;
  }
}

This should achieve what you are looking for.

Thanks.

#17

Thanks soooooo much! That was it!
You’re the best!

#18

You are most welcome. :slight_smile:

#19

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