Highlighted

Image skews in smaller screens

Explorer ,
Sep 04, 2020

Copy link to clipboard

Copied

Hello,

I'm working in DW/Bootstrap and I actually never came across this before, but I have an image, looks fine in the desktop view, but when I make the screen smaller, the image gets all skewed and looks really bad. It can be seen here: http://kennelmannequins.se/1Alarm/hemlarm.html, not the header image, but the one in the container. I have tried to re-make the image several times, but I can't simply get it to work. If somebody could help me with this, I would be very grateful!

 

Kind regards Carolin

Adobe Community Professional
Correct answer by Ben M | Adobe Community Professional

I was able to solve it with 2 changes:

 

Original code:

<div class="row"><img src="bilder/STORA-PAKETET_1Alarm.jpg" class="img-fluid bildpadding" alt="Larm"> </div>

 

New code:

<div class="row"><div class="col"><img src="bilder/STORA-PAKETET_1Alarm.jpg" class="img-fluid bildpadding" alt="Larm"></div></div>

 

First, to keep the bootstrap structure it is always best to make sure you have columns inside your rows even if the column is the full width. The "bildpadding" was always affecting the resizing.  If you need to add padding you can use the "p-" classes to add padding to your image instead of the custom CSS.  https://getbootstrap.com/docs/4.4/utilities/spacing/

TOPICS
Bootstrap, Code, Error, How to, Preview

Views

26

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Image skews in smaller screens

Explorer ,
Sep 04, 2020

Copy link to clipboard

Copied

Hello,

I'm working in DW/Bootstrap and I actually never came across this before, but I have an image, looks fine in the desktop view, but when I make the screen smaller, the image gets all skewed and looks really bad. It can be seen here: http://kennelmannequins.se/1Alarm/hemlarm.html, not the header image, but the one in the container. I have tried to re-make the image several times, but I can't simply get it to work. If somebody could help me with this, I would be very grateful!

 

Kind regards Carolin

Adobe Community Professional
Correct answer by Ben M | Adobe Community Professional

I was able to solve it with 2 changes:

 

Original code:

<div class="row"><img src="bilder/STORA-PAKETET_1Alarm.jpg" class="img-fluid bildpadding" alt="Larm"> </div>

 

New code:

<div class="row"><div class="col"><img src="bilder/STORA-PAKETET_1Alarm.jpg" class="img-fluid bildpadding" alt="Larm"></div></div>

 

First, to keep the bootstrap structure it is always best to make sure you have columns inside your rows even if the column is the full width. The "bildpadding" was always affecting the resizing.  If you need to add padding you can use the "p-" classes to add padding to your image instead of the custom CSS.  https://getbootstrap.com/docs/4.4/utilities/spacing/

TOPICS
Bootstrap, Code, Error, How to, Preview

Views

27

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 04, 2020 0
Adobe Community Professional ,
Sep 04, 2020

Copy link to clipboard

Copied

I was able to solve it with 2 changes:

 

Original code:

<div class="row"><img src="bilder/STORA-PAKETET_1Alarm.jpg" class="img-fluid bildpadding" alt="Larm"> </div>

 

New code:

<div class="row"><div class="col"><img src="bilder/STORA-PAKETET_1Alarm.jpg" class="img-fluid bildpadding" alt="Larm"></div></div>

 

First, to keep the bootstrap structure it is always best to make sure you have columns inside your rows even if the column is the full width. The "bildpadding" was always affecting the resizing.  If you need to add padding you can use the "p-" classes to add padding to your image instead of the custom CSS.  https://getbootstrap.com/docs/4.4/utilities/spacing/

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 04, 2020 0
Carro000 LATEST
Explorer ,
Sep 04, 2020

Copy link to clipboard

Copied

Thank you so much, it's working now! And thank you for the tip on padding, I'll check that out!

Have a nice weekend 🙂

 

Kind regards, Carolin

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 04, 2020 0