Responsive Design Issues Enfold 4.5.7

I edited the value to 3em and it changes all of the headings throughout the whole site and not in a good way.

But the CSS code on the Live site does not use em but:

@media only screen and (max-width: 767px) and (min-width: 480px)
.responsive #top #wrap_all .av-small-font-size-27 {
font-size: 27px !important;
}

Maybe the custom CSS you mark as !important lost that and does not get to override the .8em code.

Hope this helps fins the solution.

Havi

Hi Rikard,

Both Custom CSS matches. You can see, that code is default to the theme. Here it is:

/* page sidebar navigation on mobile */
@media only screen and (max-width: 767px) {
.responsive #top .avia-post-nav {
display: block !important;
}}

/*breadcrumbs*/
.title_container { background-color: #dc0012;!important; }

/* Sticky header on Mobile */
@media only screen and (max-width: 767px) {
#header {
position:fixed !important;
top: 0;
}

.responsive #top #main {
padding-top:80px !important;
}
}

/*stop flickering on load more */
.avia_loading_icon {
display: none !important;
}

As you can see, that code is not mine, it’s the theme’s. The size 3vw comes as an option by default on Enfold for sizing. Therefore, it is default to the theme.

Manually overriding with pixels every single instance where this happens (besides having to investigate what the value should be for every image size) should not be what I have to do when I use a premium theme that offers responsive design. It could be several pages and on the home page, this happens at least, 4 times. This is the reason I put the ticket. It worked before, now it doesn’t.

Manually adding CSS code (that bloats the page) and that will not look as good as it does now is not the option I am looking for. I could have done that myself. Again, this worked before, and on Enfold 4.5.7, it doesn’t.

Quoting ne of the many articles on the topic:

What’s the Advantage of Using Viewport Units?

Simply put, by implementing viewport units correctly, you can create a fluid responsive effect that is quite different from a simple adaptive website. A responsive design will automatically adjust its size as your viewport changes, whereas an adaptive design will correct itself once your viewport reaches a specific size, thanks to the use of media queries.

The advantage is obvious from an aesthetic standpoint – a fluid design simply looks better. Additionally, using viewports over fixed units poses the additional advantage of being easier to implement and maintain. Implementing an adaptive design will, in most cases, require the addition of multiple media queries, with specific values that must be pixel perfect.

What’s more, using viewport units enables you to easily design your text to always remain at a comfortable line length, then have that experience scale upwards or downwards as your resolution adjusts.

Best,

Havi

No, the problem is that you offer a choice of viewport css – that I already used on the design and was extremely happy with – and for some reason stopped being responsive. So, as it worked before, it should work now, Something must be off.

If you do not support this css option anymore, you shouldn’t allow it to be selected. And all of us who have used it, need to know so we don’t have strange looking websites.

And that’s what I want taken care of.

Best regards,

Havi

Hi Victoria,

There were no modifications made to the code since the earlier releases. And this is standard code. Can you please show me where the custom code is coming from? (I shared all the CSS with you earlier. and here are a couple of screenshots showing you the Enfold CSS options chosen.

Thank you.

Havi

Of course!!

I have even

This seems to be missing after av-special-heading-tag: av-small-font-size-overwrite av-small-font-size-27 av-mini-font-size-overwrite av-mini-font-size-27

Compared with the Chrome console.

Even copy pasted on the Chrome console and that fixed it.

I disabled minification of CSS and Javascript (even though the staging environment is not cached) to help find what may be missing and from where…

Let me know if I can help in any way…

Thank you!!

Havi

Hi Ismael!

I just saw that… that’s weird.. it’s a copy from the Live site but with the updated version.

So glad the problem was identified… thank you so much!! I’ll make sure to check that these values still exist after the update and nothing went wrong.

Are you planning on making vw available for mobile in the future? It would eliminate the need to manually override these values and it would adapt to every screen size (portrait or landscape), browser, you name it that’s out there. It would become truly adaptive design (and you already have many features that allow us to hide elements on one or the other screen, my conversion agency clients are extremely happy about these features)

Thank you again!

Best regards,

Havi