-
Posts
-
Hi
I am having issues with how certain images resize across the different browsers. If you look at the homepage images (specifically in the Logo Section, and the Your Coach section) i have set a background image with gaps so that the whole image appears, which is a nice effect on smaller browsers, but of course does not work so well when looking on larger desktops.
Is there a better solution for this situation? Should I set a fix image width?Many thanks!!
Hi There,
You are using your images as background images and they are behaving as expected.
If you use an image element instead on top banner you will solve your problem.
Regarding the Your Coach section you can re-think the design a bit in order to achieve a satisfying result.
Hope it helps
Joao
Hi
Thanks a lot for your reply.
1. In this case, is there any way of restricting the height if I use the image element?
The issue is when using browsers of different sizes…. If i look at the site on my larger desktop, see attached image- it takes up almost the entire page!2. Re the coach section, do you have any suggestions to achieve the same effect? Am I forced to use an image element again?
What you want to achieve would require custom media queries. That is under custom development though so that falls outside the scope of our support. You might want to contact our trusted partners who caters X setup and customization needs. Please see https://community.theme.co/custom-development/
Thank you for understanding.
Hi
Can it be fixed through css of the image element? I have had issues in the past relating to problems with responsiveness, and you’ve managed to fix it without any difficulties.
Is it different this time because it is full-width and not in a specific container?
Hi Charles,
You can restrict the email height for example by adding the following rule to the Style Box of the Image Element, you will find the STYLE Box at the very bottom of the element:
max-height: 500px;
The Gap Element also offers a hide based in screensize function, you could use that. Or creating two Rows, One designed for Mobile another for other sizes.
Hope that helps
Joao
- <script> jQuery(function($){ $("#no-reply-1342959 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>
