Removing Fixed Size on Images with HTML

[JTPwellness]

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):

<center><a href="TILE-LINK"><img src="TILE-IMAGE"></a><a href=" TILE-LINK ">< TILE-IMAGE "></a><a href=" TILE-LINK"><img src=" TILE-IMAGE "></a><a href=" TILE-LINK"><img src=" TILE-IMAGE "></a><a href=" TILE-LINK"><img src=" TILE-IMAGE "></a></center>

[nickdeckerdevs1 · Accepted solution]

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

<img style="max-width: 100%;" src=" TILE-IMAGE ">

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

[kosalaindrasiri]

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 : 

<div class="icon-row">
    <a href="TILE-LINK"><img src="TILE-IMAGE" alt="Icon 1"></a>
    <a href="TILE-LINK"><img src="TILE-IMAGE" alt="Icon 2"></a>
    <a href="TILE-LINK"><img src="TILE-IMAGE" alt="Icon 3"></a>
    <a href="TILE-LINK"><img src="TILE-IMAGE" alt="Icon 4"></a>
    <a href="TILE-LINK"><img src="TILE-IMAGE" alt="Icon 5"></a>
</div>

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

[JTPwellness]

Thanks Kosala!

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

[Anton · Accepted solution]

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

[JTPwellness]

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?

<img src="https://www.niteflirt.com/fm/f/1743603667-5xuy32DYgj/16mz6b">

[nickdeckerdevs1]

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

[nickdeckerdevs1]

show off

[Anton]

😂

[nickdeckerdevs1 · Accepted solution]

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

<img style="max-width: 100%;" src=" TILE-IMAGE ">

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

[JTPwellness]

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:

<img src="https://www.niteflirt.com/fm/f/1743603667-5xuy32DYgj/16mz6b">