LilahLee

I did not know contacting my host would help in this case considering my site is still live. I will ask them if they can remove it. I am very sorry for my lack of knowledge in this area – learning everything to do with building and maintaining a website has not been easy for me to learn. I find your comment about timers rather insulting – it just seems a little harsh. I know themes do not break at random. I only mentioned that I was not adding plugins or editing anything at the time so it could be ruled out of a reply. I always strive to give any information I can on the situation in case it happens to be relevant to the solution. I will not bother you with my questions any longer.

Okay so usually the way of things – the code worked after I posted it did not. The margins are greatly improved but not perfect. On three across there is a slight gap horizontally that I want the same as the vertical margins – while four across is the opposite. Horizontal margin is good while vertical still has a larger gap than I would like to see. The same as the top to bottom margin would be nice. Since value changes are taking effect now I have no doubt I will figure this out.

I am very grateful for the help!

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.

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?

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.

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!

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!

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 ??

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.

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

Hello, I apologize for putting this in the wrong place!

Leaving the fields blank seems to do the trick!

I do have the latest version of the toolkit – but it’s still not loading properly. However I have started using the the non visual shortcodes instead and I don’t mind them now – so I will keep using them.

Thanks for considering my request – I found a source for the border coding that I need and it takes awhile to put in being long form but I am happy with how my images look.

The shortcodes ultimate is the plugin that caused the previous error and prompted this topic! Something went wrong with how it displayed images – could have been the border itself or the labels I was using. All I know is that everything sorted itself out when I deleted it. I am going to stay away from other shortcode plugins for awhile.

Hi, thanks for the recommendation. I like the column generator that is included with the theme and especially the visual aid output feature so I probably don’t need the pagebuilder plugin. I almost posted a link to my site then decided to remove the plugin I was using and it was actually causing the image overlap and stretching problem – which is a real shame because I was enjoying the basic image border feature. I came to the conclusion myself that I will need to redo everything so I figured a link would be of no use to you since the thumbnail display is fixed. I apologize for relating the stretching issue to your column shortcode.

However I am still seeing a problem with the way the column visual aid displays inside the editor. I can’t link you to my editor page but perhaps a screenshot would help? I used this feature quite a bit in Chrome so I know how it should look – but while using Firefox broken boxes show up inside and above the column areas which I am not used to seeing. They don’t seem to effect the code when switching to text editor and also don’t show up when I publish the page – which is all the more bizzare. It also adds a broken box to the right edge. Is this something I should be worried about?

https://curiorealm.com/wp-content/uploads/2014/08/01.png

On a side note I have been struggling with being able to add basic css frames to linked images that are hosted elsewhere. I want solid grey color borders and padding around my product pictures – which was possible with the shortcodes plugin I was forced to delete. I can’t find another plugin that will create these borders for me so that I can easily add the shortcode opening and closing tags around my linked images. Would you consider adding a basic image frame shortcode along with the other virtue ones? It would be really amazing if you could – padding and solid color codes bordering images helps them to look a lot less raw and more finished.

Thank you so much! I really love these custom CSS fixes.
Tested in various resolutions and the logo text now fits to each one.

I appreciate both of you helping ??