-
Posts
-
Hello,
I just had a long support help fixing our main menu to be responsive in all window sizes. Ref: https://kriesi.at/support/topic/menu-is-not-well-responsive/
I now see that this is a common design on many pages on our site: https://geilolaft.no/ (I have taken over this site and do no longer have the support of the guys who created it)
Example pages:If you look at these pages and scale down the window to the smallest size, you will se that the transparent color section in the bottom of the first large image, with text on it, is not very responsive. When scaling down the text or even the color section itself pops below the image and it is not looking good. This makes it very bad on Mobile.
I also see that the text, which is Special Heading, is entered as an HTML code, rather than plain text in many places, and there is a warning on these in the Avia Layout Builder when I look at them. These should all be in plain text, right?
Since this is a design on many pages, and it took support to do some coding (that I myself did not enter) when fixing our main menu, I wonder if you have a suggestion on how I could change this design to maybe another element or settings to make it mobile friendly and responsive on all pages?
Very thankful for your tips and guidance on how I could redesign this.
/Hanna
Hi Hanna,
Please try the following in Quick CSS under Enfold->General Styling:
@media only screen and (min-width: 768px) and (max-width: 1300px) { .froystul-banner-caption-section { top: -117px; } } @media only screen and (min-width: 575px) and (max-width: 767px) { .froystul-banner-caption-section { top: -154px; } } @media only screen and (max-width: 574px) { .froystul-banner-caption-section { top: -190px; } }Best regards,
RikardHi,
I did as you said, but that had no effect at all.
So I removed it now.
You have my login if you want to try for your self.Anything else?
Hi.
The transparent color section is still not very well responsive on any of the pages where it is used:
All the sub pages under this menu: https://geilolaft.no/hyttemodeller/
Ex one of them: https://geilolaft.no/hyttemodeller/froystul/ – here it looks good almost all the way down from a large window size to the small, but in the smallest/mobile size it does not look good.And all three sub pages under this menu: https://geilolaft.no/hyttetomter/
They all behave a bit differently.
For example on this page: https://geilolaft.no/hyttetomter/voringsfoss-liseth/
the second Color section (containing a Special Heading) is aligned at the bottom of the first Color section (containing a Background image with a Special Heading on top) in larger window sizes, but scaling down it jumps up with a margin above the bottom edge of the large image in the first color section in all sizes down to the smallest/mobile size.But for example in another case: https://geilolaft.no/hyttetomter/lia-fjellgrend/
the setup is the same, but here, the second color section is jumping up and down when scaling down the window. (jumping between being aligned with the bottom edge of the large image in the first color section, and with a margin above the bottom edge)Since they all behave differently, will one CSS code cover them all? If one of these can work well, I could apply the changes to all the other pages.
Thank you for your help,
HannaHi,
You can simply add another media query in your CSS. I’ve added one for you here, simply adjust the value to fit your needs:
@media only screen and (min-width: 768px) and (max-width: 1300px) { .froystul-banner-caption-section { top: -117px; } } @media only screen and (min-width: 575px) and (max-width: 767px) { .froystul-banner-caption-section { top: -154px; } } @media only screen and (min-width: 479px) and (max-width: 574px) { .froystul-banner-caption-section { top: -190px; } } @media only screen and (max-width: 478px) { .froystul-banner-caption-section { top: -190px; } }Best regards,
RikardHi.
I´m sorry but CSS-coding is not simple for me in any way.
I have no clue what you just did or mean I can do.
And whatever you added did not fix how it looks on mobile.Is it not possible to use Enfold to design a site without knowing how to use CSS?
I would love it if you could give me a way to change the design I am referring to without having to add CSS.
Is that possible?Thank you,
HannaHi Hanna,
I’ve added the CSS for you, and it’s applying on your site. You will have to change this to adjust it on small mobile screens:
@media only screen and (max-width: 478px) { .froystul-banner-caption-section { top: -190px !important; } }Adjust the value 190 up or down, to suit your needs.
It’s possible to design sites with Enfold without knowing CSS, but since you have a custom solution here, then you need to know CSS in order to adjust it for different screens. If you intend to keep on using custom solutions, then I would recommend that you learn CSS. Also please note that we are not here to customise your site for you, although we try to help out as much as we can.
Best regards,
RikardHi
Tank you for helping me.
I am realising that it would be best for me to redesign the whole site in a way that does not require CSS coding.
Preferably I would love a WYSIWYG editor.How would you recommend me to redesign our site in a way where we would not need CSS coding and where we would not loose important SEO linking to all the pages. Is it at all possible to redesign the pages one by one, keeping the URL´s, into a CSS-free design?
Very thankful for your guidance here.
/Hanna
Hi Hanna,
I guess you could rebuild each page on the backend, then when you are done, you can simply publish the new page and delete the old one. Also remember to change the permalink of the new one, to the old. We can’t really help you with redesigning your site, but if you stick to using the default elements from the Layout Builder, then you will probably not have to use any CSS.
Best regards,
Rikard
- You must be logged in to reply to this topic.