Melody Theme: Overhanging Images

  • Author
    Posts
  • #3044777

    danafashina
    Member

    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 ivegotcake.com.

    #3044976

    jessestu
    Staff

    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.

    #3045005

    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.

    #3045007

    jessestu
    Staff

    I appreciate you looking at that, @thesacredpath.

    #3045010

    You are welcome.

    #3045015

    danafashina
    Member

    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?

    #3045017

    jessestu
    Staff

    @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

    #3045047

    danafashina
    Member

    Holy shi!t my pictures look amazing haha, thank you so much!

    #3045048

    danafashina
    Member

    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?

    #3045066

    jessestu
    Staff

    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?

    #3045069

    danafashina
    Member

    @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!

    #3045070

    jessestu
    Staff

    Thank you so much, Dana! I’ll look at your other post and reply if I can come up with a solution ;-).

    Best,
    Jesse

    #3045084

The topic ‘Melody Theme: Overhanging Images’ is closed to new replies.