[pdopchevParticipant]

Hi guys,

Would really appreciate your help with a couple of things I am working on:

1. Wandering how to set a constant size for image certain image placeholders so once I save that as a template it is always the same. I am referring to the images in the middle of the post.

link: http://www.enjoycrestedbutte.com/sample-post

2. What would be the css code to control the white space between the images? Please check screen grab.

Thank you!

[ChristopherModerator]

Hi there,

#1 Please add width: 78%;margin-right: auto;margin-left: auto; in image’s style field.

#2 Add mbn in image’s class field. To remove vertical space, enable ‘Marginless columns’ option.

Hope it helps.

[pdopchevParticipant]

Hi, it does help! About the 1st question (“Wandering how to set a constant size for certain image placeholders so once I save that as a template it is always the same.”) – I was looking for a way to set placeholder dimensions so they are always constant. For instance, if the size of the placeholder is 960x640px the uploaded image would resize to fit the 960x640px space. Is that doable?

p.s. something like this example: http://www.enjoycrestedbutte.com/test-post (the content was taken from a block template)

Thank you!

[Rue NelModerator]

Hello There,

Thanks for updating in! Please keep in mind that all the image element with the columns will automatically resize and follow the width of the columns. If you want to limit the width of the column, you can simply add an inline css in the column settings like max-width: 400px; max-height: 500px; overflow: hidden;.

Hope this make sense.

[pdopchevParticipant]

Thank you for your help! Another thought – is it possible to keep the bottom of the last two images leveled? (please check screen grab).

Also, how do I narrow the “white space” between the same images? If “Marginless columns” is used, they look like they are glued together.

[ChristopherModerator]

Hi there,

#1 Please add height: 552px; in left image’s style field.

#2 Add following code under cornerstone settings tab/custom css :

#x-section-3 .x-column.x-2-3 {
    width: 68.33332%;
    margin-right: 1%;
}

Hope it helps.

[pdopchevParticipant]

Hi, thank you so much for your help! The css is working when viewed at a large screen, but once you go down in size, things get “chunky” again (see screen grabs). Is there a way to fix that or it is a never ending battle?

[NicoModerator]

Hi There,

Thanks for update.

However, upon checking your setup it is working well both in large and small screensize.

Please clear browser and site cache before checking if still not working on your setup would you mind sharing us the details of the browser or mobile you used.

let us know it goes.

Thanks.

[pdopchevParticipant]

Hi,

For unknown reason the css code was not applied to the page and image – most probably forgot to save the changes!

Anyway, just tested it again in a “fresh” browser – firefox – and the “glitches” happen again at lower screen sizes. The code only works, if page is viewed at 1200px and up (please check the screen grabs). Actually, in this case the client wants priority to the small screen sizes – if that helps in any way for solving the problem.

Thank you!

[Rue NelModerator]

Hello There,

Thanks for updating in! Please keep in mind that the image height of the image will automatically resize relatively to the width of the image. If you add a fixed height, that fixed height is only good for a specific but will look messed up in other screen size. To make sure that both of the images will have the same height, you should add height: 552px; in each of the image element. And then with the help of this css, the image will have the same width on smaller screens. Please edit your page in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

@media(max-width: 767px){
  #x-section-3 .x-column.x-2-3 .x-img,
  #x-section-3 .x-column.x-1-3 .x-img {
    width: 100%;
    height: auto !important;
  }
}

Hope this helps.

[pdopchevParticipant]

Great, thank you so much for your help! After playing around with the css code managed to adjust it so the images finally display properly in different screen sizes. This is what I have so far:

@media(min-width: 980px){
  #x-section-3 .x-column.x-2-3 .x-img,
  #x-section-3 .x-column.x-1-3 .x-img {
    height: 552px;
  }
}

@media(max-width: 979px){
  #x-section-3 .x-column.x-2-3 .x-img,
  #x-section-3 .x-column.x-1-3 .x-img {
    height: 445px;
    margin: 0%;
  }
}

@media(max-width: 767px){
  #x-section-3 .x-column.x-2-3 .x-img,
  #x-section-3 .x-column.x-1-3 .x-img {
    width: 100%;
    margin-bottom: 1%;
    height: auto !important;
  }
}

Last question – is there a way to decrease the “white space” between the bottom two images without distorting the layout so far and the images themselves?

[Nabeel AModerator]

Hi again,

Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.postid-93 #x-section-3 .x-column.x-2-3 {
    margin-right: 1% !important;
    width: 68.333332% !important;
}

Let us know how this goes!

[pdopchevParticipant]

Great, thank you so much for your help!

[JoaoModerator]

You are welcome 🙂

[pdopchevParticipant]

Hi guys,

Got stuck on a similar issue after trying to utilize a similar code to the provided above but unfortunately, cannot make it work…

Trying to align different size images in one row – one is 750x550px and the other one is 900x350px. It looks okay on small screens but on anything bigger than 767px it is disproportional due to the nature of the images. Is there a “cure” for that?

link: http://www.enjoycrestedbutte.com/the-crested-butte-snow-report

[Author]

Posts