How to achieve different content width for images and text in Metro Pro

[hn345]

Hello, I'm new here. Building my first website, an online publication, using Metro Pro.

I'm using the content-sidebar as the default layout for individual blog posts, which typically have a heading, followed by a byline, a large photo and then the article (which may have charts inserted as images). However, for some individual blog posts I'd like to initially use the full-width layout, if it can be modified to show a reduced content width for the article text. I.e. the post heading and photo should be full-width (ideally site-container width, though that's not critical) and the article text and any charts something like 750px width. This is the type of effect I'm after:

Can anyone suggest how that could be accomplished?

Thanks in advance.

[Brad Dalton]

You could create a custom layout

Or use the single post filter http://codex.wordpress.org/Plugin_API/Filter_Reference/single_template

Another option would be to use a custom body class

---

Tutorials for StudioPress Themes.

[hn345]

Hi Brad,

Thanks so much for responding and giving me the options. The custom body class concept seemed easiest to implement. Managed to do it via a Studiopress code snippet to functions.php (my very first conditional tag!) and some styling to the pre-media queries section of style.css. It worked beautifully! But the celebrations were short lived, because the changes messed up the site on media screens! Now trying to figure out how to rectify those problems. Added some new code to the media queries sections, but it's not perfect. Metro Pro is beautifully responsive on all my media screens and I hate to mess with that.

Two new questions:
1) Is there a simple way to exclude media screens in the conditional tag? Ideally, would have something like:

If ( is_single() AND has_tag() AND..."is not a media screen"...

2) Generally speaking, after adding a new custom body class to a theme, is there a simple way to restore the original responsive settings in style.css, or would it require extensive coding in the media queries sections?

My site is not yet live, so can't give you the address. If you need it to help me with Q2, we'll have to wait a week or so, when I should be ready to go live with a basic version of the website.

Thanks,
h

[hn345]

I think I've fixed the issue using CSS code, but I'd still like to know if it's possible to exclude media screens with a simple conditional tag (or filter)? I'm waiting till I've tested all the code before marking this as resolved.

[Brad Dalton]

You can exclude different screen sizes using a mobile conditional tag or CSS Media Queries but i don't have the specific code to do this at this point in time.

---

Tutorials for StudioPress Themes.

[hn345]

Thanks, Brad. I googled "mobile conditional tag" and came across a couple of very helpful tutorials on wpsites.net on the subject! I have seen many of your tutorials in recent months and found them useful.

At this point I'm going to stick with the CSS changes I made, because they seem to be working. I'll revisit the mobile conditional tag if there are any problems with specific devices.

Thanks again, and best regards.

[Author]

Posts