Wider media

celebratingsunshine24 · Member · Jan 24, 2016 at 1:50 am
Copy link

Add topic to favorites
I’m using Sela theme. Is there any way to widen the post content area so that my pictures appear a bit wider (750 or 800 instead of 620)? Please help.

Thank you! :-)

The blog I need help with is: (visible only to logged in users)
staff-jeanpierreac · Staff · Jan 25, 2016 at 8:07 am
Copy link
Hi there.

Right now, your page (in screen resolutions of 1180px and wider) has a constraint to fix that: “max-width: 1180px”. You can make this bigger with the following css statement:

media=”all”

@media screen and (min-width: 1180px)
.site {
max-width: 1400px;
}

But you will also need to adapt your primary area, making it bigger. Add to the width the same amount of pixels you added to your .site. For instance, as you added 1400-1180=220px and your .content-area has a value of 765px, you could change this to 765+220=985px.
```
media="all"
@media screen and (min-width: 1180px)
.content-area {
    width: 985px;
}
```
This will make your text area wider. But what about pics? You would need to say you need to use all the space available for them (100%) or a little bit less (90%)…
```
media="all"
.entry-content .aligncenter {
    width: 90%;
}
```
I hope this helps.
celebratingsunshine24 · Member · Jan 26, 2016 at 4:59 pm
Copy link
Thank you. I’m going to try that.
celebratingsunshine24 · Member · Jan 26, 2016 at 7:24 pm
Copy link
Well, I tried it and nothing changed. Am I missing something?
staff-jeanpierreac · Staff · Jan 27, 2016 at 6:51 am
Copy link
Hi there.

Just to understand why that doesn’t work: how/where did you add those three pieces of code?
celebratingsunshine24 · Member · Jan 27, 2016 at 10:56 am
Copy link
I went to Appearance, Customize, CSS and then added the three pieces of code.
staff-jeanpierreac · Staff · Jan 28, 2016 at 7:05 am
Copy link
I think I got it! :)

We don’t need to constraint the first .site declaration. Could you try now this code?
```
.site {
max-width: 1400px !important;
}
media="all"
@media screen and (min-width: 1180px){
.content-area {
    width: 985px;
}
}
.entry-content .aligncenter {
    width: 90%;
}
```
Hope it helps!
celebratingsunshine24 · Member · Jan 28, 2016 at 1:33 pm
Copy link
Thank you so much for taking the time to answer, raulanton.

I just added the new code and now the pictures look a little smaller than before and the total width seems a bit too much. Can’t we just widen the main area content with only half of an inch? I just want the pictures a bit wider.
staff-jeanpierreac · Staff · Jan 29, 2016 at 7:31 am
Copy link
Sure!

You can adjust 1400px and 985px values to fit your needs. Just, take into account these measures fix the width in pixels (or screen points). That means that what is 1 inch in your screen could be different in another screen (Imagine a cellphone).

:)
celebratingsunshine24 · Member · Jan 29, 2016 at 1:16 pm
Copy link
I tried again today to add the three pieces of code (after I cleared the cache) and nothing changed. I guess it’s not as easy as I thought. Thank you for trying.
thesacredpath · Member · Jan 29, 2016 at 10:51 pm
Copy link
Hi, let’s give this a try and see what you think. After adding the following CSS, scroll down and in the Media Width field, put 800 and then save and visit your site.
```
.site {
    max-width: 1370px;
}
.content-area {
    max-width: 945px;
    width: 100%;
}
```
celebratingsunshine24 · Member · Jan 29, 2016 at 11:05 pm
Copy link
Wow, it worked! Thank you so much, thesacredpath. :-)
thesacredpath · Member · Jan 30, 2016 at 8:01 pm
Copy link
You are welcome.

No items found.