Eleven40 Pro Content/ Sidebar EXACT Widths

[newedgemarketing]

Hi does anyone know the exact width of the main post area in pixels of the elevean40 pro theme with a content/ sidebar setting.

CSSS says:

.content {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
float: right;
padding: 32px 40px 24px;
width: 850px;
}

so it looks like 850px but if i place a half width image 425px in a post, the image fills more than half the post width.

I think that 850px includes padding which i'd need to take off the 850 to give me the exact width. but i don;t know from 32, 40 or 24 to subtract.

does anyone know? i want exact pixels dims it may seem petty but thats what i want. I'm actually shocked this is so hard to find out.

I want to be abl to place EXACT full size and half width images into my posts not there abouts

http://newedgemarketing.com.au/

[Lauren @ OnceCoupled]

The padding short code is as follows: top left/right bottom. So if your width is 850px, you'd subtract 40px from it twice (AND subtract the borders 1px twice) to get the "true" width. However, your site has a padding-left: 0; and border-left: none; over-writing that code, so really you only need to subtract 40px and 1px. (That is, the width is 809px - which can be easily seen using a browser inspector, if you'd like to learn more about that.)

Depending on how you want to insert your photos, you may be better off using column classes (eg. class="one-half"). Pixel-perfect photo insertion won't hold up with the responsive design (when your content area gets even smaller) if the right styles are not applied.

Best,
Lauren

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[newedgemarketing]

Great thanks Lauren I've asked studio press but seem to have been going backwards and forward with answers I've used the inspector but without knowing how to use that well enough I was getting it to be 810 but Studiopress were saying it was either 850 or 770 which made no sense to me.

What do you mean RE column classes? I'm just adding images in in wordpress editor I edit them first in photoshop and place them through the media library and thats it.

Is there a better way to make them more responsive friendly?

[Lauren @ OnceCoupled]

Most themes have some form of the following CSS:

img {
     max-width: 100%;
}

So if the image is bigger than the content area, it will be scaled down, but it won't be scaled up if smaller.

Should you choose to insert two images, they'll remain their "pixel perfect" size and when the content area gets smaller, one will drop below the other. In order to get them to remain side-by-side, you should use CSS. The easiest way (if you're not going to be inserting two photos in the same spot in every single post) is probably to use your themes column classes.

<div class="one-half first">
     <img src="url">
</div>
<div class="one-half">
     <img src="url">
</div>

As long as the images are larger than half the content area, they'll be scaled down to 100% of their container, even when the screen size decreases.

Column classes have a margin between each other, so if you want them to rest perfectly side-by-side (no white space) you'll have to make some kind of adjustment for them, or perhaps put the images inside a wrapper and write your own styles for those columns. This may be unclear - try them out and you'll see the white space I mean.

Best,
Lauren

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Author]

Posts