This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Jumpstart v2, Beta 3 / Layout Builder – Image size responsive/issue

  • Creator
    Topic
  • #21437
    Ron
    Participant

    Perhaps I’m misinterpreting the intent, but it seems like there is an issue with image sizes in the following situation:

    – Using the Layout Builder, created a 2-Column Element in a single Section.
    – Added an Image Element in one column (1/3) and a Content Element (2/3) in the other. 12-Column Grid.
    – Checked ON “Force all columns to be equal height, based on content.”
    – Added a 300×300 pixel JPG to the Image Element.
    – In the Image Element Settings, set the “Display Width (optional)” value to 300 (which is the width of the actual JPG referenced).

    So….tested the page display at various sizes, but the image always resizes to 100% of the width of the Image Element (which means the picture is stretched well beyond it’s 300 width). Kind of creates some undesirable effects for responsive page/images (also don’t want to use larger images for mobile/SEO optimization).

    This seems to be the CSS that is being applied:

    .container-xs-height .element-image img, .container-sm-height .element-image img, .container-md-height .element-image img, .container-lg-height .element-image img {
        width: 100%;
    }

    I am I misinterpreting the purpose of the “Force all columns to be equal height, based on content” if I don’t want the image size to change? Is this supposed to override the fixed dimension of the picture? Is there way to center the image in the Column that I’m missing, if not using “Force all columns to be equal height, based on content” in tablet width (short of CSS mods)? (The Image Aligment set to Center doesn’t seem to affect anything.)

    Thanks in advance,
    Ron

Viewing 5 replies - 1 through 5 (of 5 total)
  • Author
    Replies
  • #21438
    Jason Bobich
    Keymaster

    Hi Ron,

    Do you happen to have a link to live example I could look at that demonstrates the issue you’re describing?

    #21447
    Ron
    Participant

    Here are test links that demonstrate the issues

    http://www.studioartsboulder.org/sab/boulderpotterylab/test-1/
    http://www.studioartsboulder.org/sab/boulderpotterylab/test-2/

    Both page layouts have the same settings except Test 1 has
    Columns -> Edit Setup -> “Force all columns to be equal in height, based on content”
    Checked ON

    Test 2 seems to be behaving more rationally (for responsive and is closer to what I thought would be happening), except the Image is not centered despite the Image Alignment set to Center.

    Thanks again,
    Ron

    #21450
    Jason Bobich
    Keymaster

    Thanks Ron — Can you leave this up a little while so I can look at it more in-depth when I’m at my work computer?

    ========

    In terms of the first example, I need to think about this more. I’m not sure why I’m forcing the images to be 100% on equal height columns. I feel like there was a reason, so I need to mull that over more.

    ========

    For the second example, it’s a different issue. It’s just this simple issue of “aligncenter” class not working to center images, as Angela pointed out here: http://support.themeblvd.com/forums/topic/worpress-4-2-killed-all-of-my-theme-options/#post-21338 — I’ve got this fixed for the next update.

    ========

    And for reference, the purpose of the feature to make the columns “equal height” I don’t think applies in the way you’re using it. This is meant to be used if need the actual height of the DIV wrapping the columns to be equal in height.

    For example, say you applied two different background colors to your two columns — When you look at this on the frontend, you’ll see that obviously the background colors of the two columns are not going to match up. This feature allows that to be possible.

    However, this doesn’t change anything in regards to why images are being forced to 100% width.. I still need to figure this out.

    #21453
    Ron
    Participant

    Yes. I’m using the Test pages to show things to my client, so I’ll just create new ones for them. Let me know when you don’t need Test 1 and 2 anymore.

    Thanks for your help.
    Ron

    #21474
    Jason Bobich
    Keymaster

    Ok, you can take that example down, thanks.

    I dug through my commit logs, and remember now why I did this, and it is needed, as far as I can tell — The way the “equal heights” columns work is by styling the columns with CSS to display like tables, which is the only way I know how to make equal height columns without fixed heights. When you do this, you get varying funky results in different browsers.

    One side effect of this (I saw in all major browser except Chrome) is that images are no longer responsive (i.e. the standard application of max-width:100% no longer works). If you want to see what I mean — Add an image that is much wider than the columns to your first narrow column, and leave the “Display Width” option blank. Then, look at the page in Firefox, and disable the 100% width in Firebug, and you can see the result:

    So after a lot of research, styling images to be 100% in these columns is the only practical fix I could come up with.

    BUT one thing I can do is remove this 100% styling if you’ve used the “Display Width” option. But you have to keep in mind that if for some reason your image’s display width setting is larger than the output of the column at any given viewport, it will mess up the column structure.

    ====

    Another thing I want to note: Previously explained that the “equal height” columns feature was only meant to be used when having columns with backgrounds. Well, I forgot about one thing…

    You can also use this feature to center content vertically within columns. This is only possible through the “equal heights” column feature, as it styles the columns like classic tables.

    For example, this makes it possible for me to do this on the demo #1 homepage:

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.