-
Posts
-
Hello I am having issues related to responsiveness, scaling the site down to cell phone screens mainly.
• On the start site the footer widgets do not scale properly as its creating line breaks and keeping the widgets next to each other, they do behave properly on all other pages where the 3 areas are moved one below the other and everything stays readable.
• I am using image backgrounds in color sections as headers for the one page chapters on the start site. However they do not scale to smaller screens, text (special header) doesn’t scale as well. Are there settings I am overvlooking, a poor choice of image proportions or is there another way to create a layout similar to this that is responsive. http://www.manutherapeuticum.de/#kontakt
• Is there a way to make the layer slider I am using as a header on the start site behave wit a scroll down parallax effect as the color sections below do.Best Reagards, Martin
Hey romora,
Please try adding the following to quick css to fix the footer:
@media only screen and (max-width: 767px) { #footer .container .flex_column.av_one_third{ width:100%; } }Please let me know if this works and we will then work through the other issues as well.
Best regards,
Jordan ShannonHello Jordan, Thank you for your quick response on a weekend.
• The Footer Issue is 99% resolved, the only minor thing ist that the News and Search field don’t justify properly to the left so they don’t align with the company name, but move further left the narrower the screen becomes. The general problem of the footer not scaling properly in the first place only occurs on /anfahrt and the start site by the way)
•Do you have any suggestions on how to make the color fields and the headers within them responsive. Is it possible to for example make the 100% wide instead of cropping them by using an absolute height (the seem not to scale at all but just crop from the sides).
Thank you for your support and best regards.
Hi,
To correct the news and search section, also add the following:
@media only screen and (max-width: 767px) { .flex_column.av_one_third.el_after_av_one_third.el_before_av_one_third{ margin-left:0px!important; } }Please let me know if this works. I am not ignoring the second half of your question, I just want to address everything individually.
Best regards,
Jordan ShannonHi,
Glad Jordan was able to help, we will close this now. Thank you for using Enfold.Best regards,
MikeHello Jordan, Mike. Can you find a solution for the other issue I have with making the images and headers in the color fields responsive.
Cheers, MartinHi,
Would you be able to provide login info so I can look into this further?
Best regards,
Jordan ShannonHI Jordan did you receive the login credentials or do you receive private content only when i write something in the public reply field. Best Martin
Hi,
Can you provide a screenshot of the error? I am not seeing responsiveness issues on my end.
Best regards,
Jordan ShannonHi Jordan, what i meant by that is that the Color field has a fixed height, is there a way to make them shrink proportionally? This currently results in the pictures getting cropped from the sides and not shrink, some images (where you have a person on the edges of the image) make no sense when they get cropped from the sides.
• (this is a minor issue, if theres no other fix I can simply slightly reduce the font size of the headers) The Headers in there do shrink though it would be great for them to shrink in a way so you see also the a little longer headers (for example Leistungen) completely on a cell phone screen.
Best regards, MartinHi,
you can control background image on mobile using this code inside Quick CSS field:
@media only screen and (max-width: 767px) { .av-parallax-inner.main_color.avia-full-stretch { background-size: 223% 77% !important; background-position: 57% 0% !important; }}Adjust as needed.
Please use a different ticket for any other questions/issues you have, otherwise things get quite confusing for us and for other people trying to search for help here.
Best regards,
AndyHello Andy, thank you for the response. I can make the images scale proportionally with that code. However the Color Field remains the same height as it seems, so I get a lot of white space. Can you think of any workaround for that. Attached is a screenshot from my cell of what I mean
Ich changed the code you provided to:
@media only screen and (max-width: 767px) {
.av-parallax-inner.main_color.avia-full-stretch {
background-size: 100% !important;
background-position: 0% 100% !important;
}}Best regards, Martin
Hi,
The color field resizes based on the actual size of the content, when you resize the elements inside only, that is why it bugs like that.
A proper solution is to go ahead and do that for color section and all the elements one by one or use some JS to make it happen properly.I would suggest to consider hire a freelancer who will be able to help you out with the process.
Best regards,
Basilis
- You must be logged in to reply to this topic.