topic Re: Removing Fixed Size on Images with HTML in CMS Development

Removing Fixed Size on Images with HTML

JTPwellness — Tue, 06 May 2025 15:21:20 GMT

I'm new to HTML and so I would really appreciate it if someone could advise on how I can apply code to my existing code that will remove the fixed size aspect of my images.

I have a row of 5 user buttons, each with an image and link. The images appear the correct size on a desktop screen but then are oversized on a mobile view so I need to remove the fixed size which is causing this. The goal is that the icons are automatically scaled to size so they look the same size on mobile and PC screens. Please can you show me how I would apply the necessary code to the following code (i have replaced the tile images and links for privacy):

Re: Removing Fixed Size on Images with HTML

nickdeckerdevs1 — Tue, 06 May 2025 15:36:25 GMT

That HTML is super ancient, using <center> -- so you could add a style of max width of 100%

However it is likely better to set this up in a module, or using css stylesheets.

Re: Removing Fixed Size on Images with HTML

Anton — Tue, 06 May 2025 15:45:02 GMT

Hey @JTPwellness,

you need to add some sort of css (in case this is your whole code).

Someting like

center{ display:flex; flex-direction:column; gap:1rem; } a img{ width:100%; max-width:100vw; height:auto; } @media screen and (min-width:1024px){ center{ flex-direction:row; } a img{ width:200px; max-width:200px; } }

the first part of the code is for mobile, the second one for desktop("if screen resolution is bigger than 1024px").

It will display the images vertically on mobile and horizontally on desktop.

You can modify the values to your needs.

If you're building a custom module,

simply add a link and image function to it, group both elements and enable the "repeater" option in the right sidebar of the group and write your code like this:

module.html

<div class="imageWrapper"> {% for linked_image in module.linked_images %} {% set href= linked_image.url.href %} <a href="{{href}}" target="_blank"> <img src="linked_image.image.src" alt="linked_image.image.alt" class="linkedImage"> </a> {% endfor %} </div>

module.css

.imageWrapper{ display:flex; flex-direction:column; gap:1rem; } .imageWrapper a{ text-decoration:none; } .imageWrapper img.linkedImage{ width:100%; max-width:100vw; height:auto; } @media screen and (min-width:1024px){ .imageWrapper{ flex-direction:row; } .imageWrapper img.likedImage{ width:200px; max-width:200px; } }

hope this helps

best,

Anton

Re: Removing Fixed Size on Images with HTML

nickdeckerdevs1 — Tue, 06 May 2025 15:49:15 GMT

show off

Re: Removing Fixed Size on Images with HTML

Anton — Tue, 06 May 2025 15:51:26 GMT

😂

Re: Removing Fixed Size on Images with HTML

kosalaindrasiri — Tue, 06 May 2025 17:27:44 GMT

Hey @JTPwellness,

To make the images responsive across devices (especially on mobile), you should remove any fixed width/height attributes and instead use CSS that allows the images to scale based on screen size.

Here’s how to improve and apply responsive design using HTML and CSS, and also clean up your current code:

Updated Code :

CSS :

.icon-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; padding: 20px; } .icon-row img { max-width: 100%; height: auto; width: 60px; /* Optional: Set a base width for desktop */ } @media (max-width: 600px) { .icon-row img { width: 40px; /* Smaller width for mobile */ } }

More resources to follow : https://knowledge.hubspot.com/website-pages/use-images-in-hubspot-content

Regards,

Kosala

Re: Removing Fixed Size on Images with HTML

JTPwellness — Sun, 11 May 2025 21:44:37 GMT

Thanks so much for your response Nick.

I tried inserting the code exactly as you provided it, in to my code but still the icon appeared oversized on mobile. I hope I inserted it correctly.

Here is the exact code for one of the icons, would it be possible to show me how you'd apply the code to it just to make sure I don't have maybe one letter wrong or out of place:

Re: Removing Fixed Size on Images with HTML

JTPwellness — Sun, 11 May 2025 21:57:44 GMT

Really appreciate your response Anton and the extensive code you've provided. Very helpful.

The only problem is (and please excuse my lack of knowledge) but I literally don't know how to apply the code you've provided to the image that I have. Would you be able to show me how to insert my image into the css example you've given?

Re: Removing Fixed Size on Images with HTML

JTPwellness — Sun, 11 May 2025 22:00:37 GMT

Thanks Kosala!

Would I use the above updated with the CSS you've provided? As in I use both?

Re: Removing Fixed Size on Images with HTML

nickdeckerdevs1 — Fri, 16 May 2025 13:06:57 GMT

Please give me your actual code you have and I can show you how to implement this and make this work.