Content width in Illustratr

nicholaspipe · Member · Sep 3, 2014 at 9:48 am
Copy link

Add topic to favorites
Hi there,

I’m using the Illustratr theme to build my portfolio blog (http://nicholaspipe.com), and I am subscribed to the Custom Design upgrade. I’m having two issues related to content width:

1. When I insert an image in a standard portfolio project, the max width of the image seems to be linked to the max width of the project text area. If I insert a large image, it is automatically shrunk to fit the width of the text. I can’t find any CSS command which can increase the available content width without also stretching the text across that new specified width (increasing global width setting in the customizer yields the same result). Basically, I want to be able to adjust text margin width and image size independently in my portfolio projects.

2. Despite these width limits, the Illustratr theme is apparently coded to recognise any embedded media (in my case, YouTube and Soundcloud) and stretch it to fit across almost the full screen width of a post. Adding the standard h= & w= modifications to the embed shortcode (as outlined by WP in the YouTube embed guide) does not make any difference. I know this special stretch code exists and can be reversed with CSS, because I read about it on another thread ; however that particular discussion did not explain how to modify the CSS and I can’t figure it out myself.

Hopefully that all makes sense and someone is able to help.

Cheers,
Nicholas

The blog I need help with is: (visible only to logged in users)
hallluke · Member · Sep 3, 2014 at 10:33 am
Copy link
The text and images in your portfolio share a parent element and it’s the width of this element that sets the maximum width for everything it contains. I can see a large (840px) image on one of your portfolio pages – are you trying to insert images larger than this?

Here’s the code to shrink and centre the video content:
```
.video-wrapper {
  width:480px;
  height:auto;
  margin-left:auto;
  margin-right:auto;
}
```
nicholaspipe · Member · Sep 3, 2014 at 2:01 pm
Copy link
Hey hallluke, thanks for the reply. Yeah essentially I want to use images larger than 840px, but keep the text at that width… for example on this page, the image containing the news article is actually 984px wide – but it has been shrunk by the theme code as per that parent element you’ve described, and it appears in line with the 840px text above it.

I tried the video code but unfortunately nothing changed – the ‘.video-wrapper’ didn’t seem to register, and the ‘auto’ values came up in red? Any further suggestions would be much appreciated!
hallluke · Member · Sep 3, 2014 at 2:37 pm
Copy link
That code works fine when I apply it to this page, can you check it?

If you want the image to appear wider you’d need to restyle your theme content area to have that width – is that what you mean?
nicholaspipe · Member · Sep 3, 2014 at 2:51 pm
Copy link
Just tried it on that page, copied and pasted the code into the CSS customizer… here’s a screenshot of what I’m getting: http://i.imgur.com/JR9AULP.png Am I doing something wrong?

Yeah that’s what I mean – I guess if there’s a way of expanding the available theme content area, so one of those large pictures can sit there in its full original size without being shrunk, and still be able to modify the text area into a narrower (840px-style) margin instead of having it stretched across the full width of the newly-specified area, then that’s what I’m looking for.
hallluke · Member · Sep 3, 2014 at 3:03 pm
Copy link
The video seems to be resized fine when I view those pages, can you check your live site rather than just from the customiser window?

The code to expand your whole theme to become larger is as follows. You could make the text narrower but there is no easy way to do this (you’d need to apply the narrower width to all child elements other than images in your posts and pages), but you could do that if you wanted. It may cause problems for viewers with smaller screen sizes or on tablets and mobiles. I’d recommend not changing this section, if your viewers are desperate to see the image slightly larger they can click through to view it separately!
```
.page-header,
.entry-header,
.page-content,
.entry-content,
.entry-summary,
.entry-avatar,
.entry-meta,
.entry-sharedaddy,
.portfolio-sharedaddy,
.comments-title,
.comment-list,
.comment-reply-title,
.comment-form {
  width:980px;
}
```
nicholaspipe · Member · Sep 4, 2014 at 3:37 am
Copy link
Okay, just logged out of WP entirely and tested the live page – looks like the same big video width to me, plus the other code for theme expansion (which did its job fine on other pages) also seems to have moved the video to the left… here’s a screenshot: http://i.imgur.com/AoBVNH8.jpg
hallluke · Member · Sep 4, 2014 at 6:50 am
Copy link
It is working for me in the latest FireFox and Chrome, what browser and OS are you using? Do you have other browsers installed that you could test on?
thesacredpath · Member · Sep 4, 2014 at 5:26 pm
Copy link
@nicholaspipe, you may wish to try clearing your browser cache also just to see if it is a possibility of your browser using a cached file instead of pulling the new one.
nicholaspipe · Member · Sep 5, 2014 at 1:45 pm
Copy link
I’m using the latest FireFox (v.32), and my OS is Windows 7 Home Premium. I tried IE9 (which I never normally use) but got exactly the same result. I also cleared my entire cache in FireFox, but that didn’t help either… Is there anything else I can try? As far as I can tell, there are no unusual/non-recommended settings on my machine or browser (e.g. display settings, plugins) which could be playing a part.
thesacredpath · Member · Sep 14, 2014 at 6:48 pm
Copy link
@nicholaspipe, is this still an issue for you? I’ve looked at your site on both Mac and Windows in Firefox and things seem to be working just fine.

No items found.