WebsiteBaker Community Forum

WebsiteBaker Support (2.13.x) => General Help & Support => Topic started by: apple on October 14, 2023, 02:54:19 PM

Title: Mobile image
Post by: apple on October 14, 2023, 02:54:19 PM

Hi, how do I make my images on mobile responsive and proportionate? The images look a bit elongated and compressed on mobile screen. Please see file attached. Left is normal and how it should be like. Right image when view on mobile. It appears squoze and elongated.
Thanks

Title: Re: Mobile image
Post by: dbs on October 14, 2023, 03:41:37 PM

Hi, in your css file should be a part for all images like this:

Code: [Select]

img {
  max-width: 100%;
  height: auto!important;
}

Title: Re: Mobile image
Post by: apple on October 14, 2023, 04:50:58 PM

Doh, I overlooked "height: auto!important;" Thank you very much!

One last question. Is it possible to isolate certain image rendering on moblle screen? For example, the header image. I want only the header image stretch across the screen.
Thanks

Title: Re: Mobile image
Post by: crnogorac081 on October 14, 2023, 05:19:37 PM

Make class from this for example .wide {... css code from below} then to header image add class > class="wide"

Title: Re: Mobile image
Post by: apple on October 14, 2023, 08:47:51 PM

Thank you  (Y)