Bad responsive Image behavior in Firefox

- 9 years, 4 months ago Sven
  Participant
  
  Expired
  
  Hi,
  
  on my Website I have a Section which is split in two columns – 50/50 or 6/12-6/12.
  
  In that Section I want to have an image on the right column – the image must not be cut just resized so that everything is shown. I had to test different options and in the end I found a solution which works on chrome for me. But in Firefox and especially Firefox Mobile the Image isn’t resized and destroys the design.
  
  I tried many different options but nothing works on all browsers and devices. A collegue said on Chrome on his Laptop (Surface 4) the Image is cut at the bottom..
  
  I will post my website in a private post.
  
  Kind Regards
  Sven
- 9 years, 4 months ago Sven
  Participant
  
  Expired
  
  This reply has been marked as private.
- 9 years, 4 months ago Mirela
  Participant
  
  Hello,
  
  That is actually the right responsive layout. In smaller screen sizes the elements are set to flow one after another and keep as much as possible of the normal sized dimensions so they will be the most visible to visitors. If you keep the elements in the same row even in small screens, the elements will be stretched to the point that will be uncomfortable for the eye(also not responsive at all).
  I opened your site in chrome/firefox/IE11/iphone/ipad and did not see any issue.
  Let us know.
  
  Best regards!
- 9 years, 4 months ago Sven
  Participant
  
  Expired
  
  This reply has been marked as private.
- 9 years, 4 months ago Mirela
  Participant
  Hello,
  
  Please add this code into your custom css box:
  
  @-moz-document url-prefix() { @media (min-width: 979px) and (max-width: 1024px){ #fws_56bdf1ca79a47 .wpb_column .wpb_wrapper { width: 69% !important;} #fws_56bdf1ca79a47 .block_title.section_title h1 { width: 69% !important;} #fws_56bdf1ca79a47 .row-dynamic-el .media img { max-width: 60% !important;} } }
  
  Let us know.
  
  Best regards!
- 9 years, 4 months ago Sven
  Participant
  
  Expired
  
  Thanks it didn’t work but I solved it by adding this code and a custom column-class:
  
  /* Fix FF Image size */
  
  @media(max-width: 980px){
  
  .rpa_section_right img {
  
  width: 100% !important;
  
  }}
  
  Best regards
  Sven
- 9 years, 4 months ago Mirela
  Participant
  
  Hello,
  
  Glad to know it’s alright now. Thanks for sharing!
  
  Best regards!

Viewing 6 reply threads

You must be logged in to reply to this topic.

Community Forums

Bad responsive Image behavior in Firefox

Site Links

Useful Articles

Login