Skip to main content
C
Carro000
Inspiring
September 4, 2020
Answered

Image skews in smaller screens

  • September 4, 2020
  • 1 reply
  • 325 views

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

This topic has been closed for replies.
Correct answer Ben M

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/

1 reply

B
Community Expert
Ben MCommunity ExpertCorrect answer
Community Expert
September 4, 2020

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/

C
Carro000Author
Inspiring
September 4, 2020

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

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices