Melody Theme: Overhanging Images

danafashina · Member · Nov 10, 2017 at 3:58 am
Copy link

Add topic to favorites
Hi!
I just got the Melody theme and would love love a little CSS help in finding the code to get over hanging images like those described here; https://wordpress.com/theme/melody/undefined/ivegotcake.com – towards bottom of the page, and better visualized on this site Danielasoriano.com, like so: https://danielasoriano.com/2017/11/08/oversized-everything/

I would love a CSS code to expand my images as well as the text as wide on the post page as it can go.
Any ideas would be amazingggg!

The blog I need help with is: (visible only to logged in users)
jessestu · Member · Nov 10, 2017 at 6:33 pm
Copy link
Hi @danafashina,

The overhanging images feature shouldn’t require CSS hacking as it’s already built into the theme’s features. Yay for easy! The instructions for the Melody theme say:

Overhanging Images

Also from the Text Editor of your post screen, simply add “extra-wide-image” class to your <img alt=”” /> tag.

To get to the HTML editor (what they called Text Editor), you can select it using the HTML tab when writing your posts. Add extra-wide-image to the class= part of the HTML. If “class” isn’t there, write class=“extra-wide-image” after img and before />. Read more on getting to the HTML editor at https://en.support.wordpress.com/editors/

—

Note 1: the above applies to images only. You asked if you can expand the text, as well. That’s not built into the theme. You can widen your site by addint this code to your custom CSS (find how) and raising this percentage to anything higher than the theme’s default of 70%:
```
@media screen and (min-width: 960px) {
 .single.sidebar-none .content-area {
  width: 80%;
 }
}
```
—

Note 2: a bug?

Upon further testing, let me make a technical note for staff to review. This feature shows the extra-wide images that display wider than the article’s width only on screens wider than 1400px, even though the article width won’t go beyond 940px (70% of 1100px max-width content-wrap). That’s a wide screen requirement to make the feature kick in.
thesacredpath · Member · Nov 10, 2017 at 8:06 pm
Copy link
Hi there, the overhanging image is indeed set to only show on 1400px and wider screens/windows, and is working as designed when I checked everything on the Melody demo site.
jessestu · Member · Nov 10, 2017 at 8:08 pm
Copy link
I appreciate you looking at that, @thesacredpath.
thesacredpath · Member · Nov 10, 2017 at 8:25 pm
Copy link
You are welcome.
danafashina · Member · Nov 10, 2017 at 9:54 pm
Copy link
Hey so first of all, thanks to both of you for replying so promptly on this!!

@jessestu I saw the notes on overhanging images but I don’t want to have to do that text code for every image.

@thesacredpath
Is there a code I can add to the CSS so that both my images as well as the text are at the maximum width of the post page?
jessestu · Member · Nov 10, 2017 at 10:10 pm
Copy link
@danafashina, I welcome @thesacredpath to chime in, as well. In the meantime, how close to what you want does the following custom CSS get you?
```
@media screen and (min-width: 960px) {
 .single.sidebar-none .content-area {
  width: 100%;
 }
}
```
Let us know and we can go from there.

Best,
Jesse
danafashina · Member · Nov 11, 2017 at 11:38 pm
Copy link
Holy shi!t my pictures look amazing haha, thank you so much!
danafashina · Member · Nov 11, 2017 at 11:41 pm
Copy link
I’ve been playing with the percentage and have a question;
– The code seems to apply to all elements of the post, is there any way I can get the code you just gave me, to exclude the text such that the text can maintain it’s initial width parameters?
jessestu · Member · Nov 12, 2017 at 6:22 pm
Copy link
Hi @danafashina,

I’m happy you like the bigger pictures! To get what you want with the wider photos without making the text around it wider, let’s use the CSS editor to make the Overhang Images feature kick in on every full-sized image in your posts that’s not viewed on a mobile-sized screen (those are already coded to be as wide as the screen itself).

Delete the old custom CSS and add this:
```
@media screen and (min-width: 960px) {
  .single.sidebar-none .entry-content img.size-full{
    margin-left:-25%;
    max-width:1043px;
    width: 150%;
  }
}
```
How does that get you what you want?
danafashina · Member · Nov 12, 2017 at 10:30 pm
Copy link
@Jessestu – You’re amazing, and I thank you so very much for all your help <3 <3

I would love some some help on adjusting the font of the menu items on the home page. Right now the menu items font is tied to the font size of posts which is fine for the posts – but looks super tiny on the home page.

It’s probably best if I open a separate thread for that though, so I don’t confuse the two issues.

Thank you again for working with me on my picture width questions, you’re great to work with!
jessestu · Member · Nov 12, 2017 at 11:11 pm
Copy link
Thank you so much, Dana! I’ll look at your other post and reply if I can come up with a solution ;-).

Best,
Jesse
thesacredpath · Member · Nov 13, 2017 at 8:15 pm
Copy link
New thread for font issue here: https://en.forums.wordpress.com/topic/default-base-font-size-for-posts-melody-theme?replies=4#post-3044749

No items found.