Mobile Image Resizing

Update:

I have been experimenting with trying to find a single fixed image width/height in case it needs to be added into some kind of override exclusion but with no luck. So to restate my question in a (hopefully) more simple way – is it possible to preserve all my images regardless of the fixed width/height when the three columns display is in landscape or desktop mode but switch to a fullwidth image when the columns display the same images one across on vertical/ mobile?

https://curiorealm.com/wp-content/uploads/2015/02/01.png

Hey,
Columns will breakdown to rows on mobile by default, that is how the responsive columns work, If you want four columns on mobile you can have that but you will need to not use the theme shortcodes and instead add some custom css.

As for your images if you have images that are 200 or 150 px wide then they are too small to be the width of most mobile screens. So why not use larger images? like 350px wide? I can’t imagine you would want images to stretch and look blurry on mobile phones?

Kadence Themes

Hello I actually like how the columns break down in mobile – the part I do not like is how small they appear in portrait view. The only reason I am scaling down my images to 150 or 200 px is because any larger and they overlap eachother and do not fit inside the columns. My images are actually 1000px by 1000px so I am certain they would look clear fit to mobile screen.

ok, if your using columns your images shouldn’t overlap unless
your adding some css that would break your site. Can you post a link. Or just make sure your not adding any css.

Kadence Themes

I just removed all my numbered px values replacing height and width with 100% and my images finally fit to the screen when the columns breakdown. The css for the images also does not break the columns this time around which is an improvement. However this gives me no control over the spacing between the columns when they are seen side by side and the gaps are huge. Anyway I suppose this is a trade-off I am willing to make!

Thank you once again for your time ??

If you post a link I can help with column margin and the right css to use.

Kadence Themes

Really? I thought I couldn’t change the margins because of the shortcodes. This would be awesome! Most of my columns are now three across accept for the very bottom post which is four across. I would like for each image to be nearly right up against one another top bottom and side.

margins 0px; had no effect where I had it so I left it out.

https://curiorealm.com/curiocollections/

Currently this is the only page that is switched over to larger images and 100% width. Perhaps you could also guide me as too the best way to go about coding images in this way? What I have works but before I make these changes to the rest of my website it would be nice knowing if there is a better way to achieve the same result.

I am really happy with how the images resize themselves from a row of ‘icons’ to a single larger column since turning to portrait view on my tablet is like zooming in for a closer look. At least I hope this is considered good use of the resources available!

Hey, You can add css to change the column widths:

.entry-content .col-md-4 {
    padding: 5px;
}
.entry-content .row {
    margin-left:-5px;
    margin-right:-5px;
}

you don’t need to do any css for images. just place the image in the columns. You shouldn’t set anything that would only confuse the css and effect the responsive code in the theme.

Kadence Themes

The code above is not making any change to the column margins even after I tested different values. This might be because I am using a border code and it confuses things like you say. I really cannot stand my affiliate images without a border though. I would consider using a plugin to improve my images but this might not work with the theme either.

This is so frustrating!

I don’t see the css i posted in our custom css box? Where are you placing?

Kadence Themes

I placed it into the custom css box within theme options and just double checked that the saves were changed. It’s at the bottom.

Are you using a caching plugin? I don’t see any custom css in the output?

Kadence Themes

The new css is inside the media query: @media (max-width: 300px), so it only takes effect when the screen width is 300px or less. The fix is to insert a closing brace } to close the media query just before the new css.

I am using cloudflare which has caching I do believe. I slimmed down my image css to just a few lines compared to the over ten it was before. No more border radius just a sharp box.

<p style="text-align: center;"><a style="vertical-align: top;" title="HOVER TITLE" href="PAGE URL" target="_blank" rel="nofollow"><span style="box-sizing: border-box; display: block; margin-bottom: 10px; border: solid 5px #302119;"><img style="max-width: 100%;" src="IMAGE URL" alt="" /></span>

At first glance does any of this look like it would conflict with the margin code?

Hello Iorro I just changed the media css value a short while ago in an attempt to tweak a different problem which is probably when I accidentally removed the bracket. Added it back but I don’t notice much of a difference after saving the changes.