-
-
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 -
-
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!
-
-
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!
-
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 -
Hello,
Glad to know it’s alright now. Thanks for sharing!
Best regards!
-
You must be logged in to reply to this topic.