Images not spanning columns

Support
#1

I am so frustrated. I have literally used this theme on every site for the past 2-3 years and now everything is breaking.

The latest- I set up a row of four images with marginless columns to fill the screen width- now the images will not span to fit the columns even though the width is on auto- it keeps filling in a default retina value for the screen size that it is when the cornerstone editing left panel is visible. When i view it there is white space around all the images because all their image sizes changed. I wanted to just use the classic image to see if that still worked but it seems to automatically then convert them to the new image element- which is horrible and is using the retina display.

The classic block grid was working but now no matter how many columns i set it too it displays four images as two columns - three on one side and one on the other.

The essential grid thing does not work well.

#2

Hi there,

Thanks for writing in.

What image settings do you use? For the meantime, please add this CSS to your global custom CSS.

.x-image, .x-image img {
width: 100%;
}

Thanks!

#3

Not sure what you mean by image settings- you can see in the screenshots what the values were in the side panel.

adding that code did work though thanks. But still shouldnt have to do that?

what about the classic block grid. how do i get 4 images to display 2 up 2 across?

#4

Hi There,

Sorry, you’re having those issues, both of those issues (image not fullwidth & block grid) are actually a bug and have been on our issue tracker. As you already know the image issue can be solved with Rad’s provided CSS code above.

The Block Grid issue though is more on the builder. Because if you look the grid on the front-end its fine.

Here’s a temporary fix, please add this to page CSS.

/*two-up blockgrid temporary fixed*/
.x-block-grid .ember-view li {
	display: block;
    float: left;
    height: auto;
    margin: 5% 5% 0 0;
    padding: 0;
}
.x-block-grid.two-up .ember-view:nth-child(2n) li {margin-right: 0;}
.x-block-grid.two-up .ember-view li {width: 47.5%;}

Rest assured that our Dev Team is working hard to resolve this bugs.

Remember to remove this temporary fixes when the official fix is released. You can check our Changelog every time there is an update.

Thank you for understanding,
Cheers!

#5

I couldnt implement because the row is acting really weird now and though i have two columns the contents of the second column keep moving to the first column and you cant select the second column. I deleted the essential grid to try to try out the block grid with your css fix but i couldnt do it.

#6

Hi There,

This is what I saw: https://screencast-o-matic.com/watch/cFVnhsoVp4
Marginless is working and the images is fullwidth on the columns. Image normal size is 408x306 but on this display it is 393x294. By default, images is set to display 100% so this is not needed:

.x-image, .x-image img {
width: 100%;
}

You can see on the screencast that I have disabled that CSS and the images are still covering the entire column. If the image width is more than the width of the column, it will adjust automatically to fit the column. On opposite case where the image width(on your case 408px) is smaller than the column width, the screenshot on your initial post will happen showing spaces on left or right. The best approach is to use a little larger image.

#7

It wasn’t working without the css fix before. I didn’t set any image sizes it set them automatically but as long as that is working I am happy with that , thank you.

But actually that was not what i was referring to in this thread if you look at the last message and the block grid conversation - i was talking about the row above and using the block grid now.

the row is set to two columns as in the shot but you can no longer select to edit and the text from the second column is displaying in the first column in edit mode. if you view the site you will see there is an essential grid there right now that i did remove that seems to pop back. i wanted to try the css fix for the block grid that @friech suggested but i cant select the column because its missing. see attached

#8

i just deleted the row and started over. seemed to work ok with his fix. thank you

#9

Glad to know all is in order on your end now. I’ll update this thread once the bugs mentioned here are fix.

Cheers!

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.

#11

Hey @katriley,

I just wanted to write in here really quick to let you know I’ve just put up a very detailed response to another user’s similar situation over here:

You may find that useful in better understanding how the Image Element works within the builders, as well as some other options to use instead that might work better for “fullwidth” images of a certain sort (i.e. with text on top, et cetera).

Cheers!

1 Like