Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • March 28, 2018 at 4:19 pm #934383
    Niemitz (www.bios-tec.de)

    Hi Enfold-Team,

    i’m currently working on turning our website more mobile-friendly but i keep running into the issue that media queries in the style.css are either not recognized at all or they just work in the responsive view in chrome and firefox.

    E.g. we have several full-width submenus which I removed the title in the mobile view and replaced them with the title of the corresponding page.
    (for one of those pages see private content)
    I have two media queries for those submenus – one for desktop view and one for mobile, but the ones for mobile are not working when I look at the page on a smartphone.

    Currently I’m using the following code to change the style and title of the submenu with the following media query:

    #top .av-current-placeholder{font-size: 0 !important;}
@media only screen and (max-width: 990px) {
div.container.av-menu-mobile-active {
background: #5e5e5e !important; /* Old browsers */
background: -moz-linear-gradient(left, #5e5e5e 1%, #989898 100%) !important; /* FF3.6-15 */
background: -webkit-linear-gradient(left, #5e5e5e 1%,#989898 100%) !important; /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #5e5e5e 1%,#989898 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e5e5e', endColorstr='#989898',GradientType=1 ) !important; /* IE6-9 */
}
.mobile_menu_toggle {color:white; background-color: #1f679d !important;}
a.mobile_menu_toggle {color:white !important;}
.page-id-33 #top .av-current-placeholder:after {content: "IT-Service" !important; font-size: 14px;}
.page-id-4272 #top .av-current-placeholder:after {content: "IT-Betreuung" !important; font-size: 14px;}
.page-id-5018 #top .av-current-placeholder:after {content: "IT-Vertrieb" !important; font-size: 14px;}
.page-id-5329 #top .av-current-placeholder:after {content: "Cloud Hosting" !important; font-size: 14px;}
.page-id-4697 #top .av-current-placeholder:after {content: "Server und Storage" !important; font-size: 14px;}
.page-id-5344 #top .av-current-placeholder:after {content: "IT-Infrastruktur" !important; font-size: 14px;}
.page-id-5349 #top .av-current-placeholder:after {content: "IT-Sicherheit" !important; font-size: 14px;}
.page-id-5337 #top .av-current-placeholder:after {content: "IT-Beratung" !important; font-size: 14px;}
}

    I ran into some issues before when I was trying to hide and show sliders with individual CSS-classes in desktop and mobile version.
    It finally worked after I put the media queries in the Quick-CSS section in enfold – so I have to ask at this point under which circumstances media queries actually work when they are in the style.css.

    Thanks in advance for your answer

    March 28, 2018 at 5:12 pm #934408
    WP Turned UP

    Hello. I’ve seen this before, where Quick CSS works but not style.css. I’m interested to hear Enfold’s response on that, but some low-hanging fruit questions:

    -Are you positive it’s not a caching issue?
    -Are you confident your CSS is in proper order, so as to not be overridden from above?

    Just some things that come to mind.

    Ryan

    March 28, 2018 at 5:18 pm #934411
    Guenni007

    the important notice on filter: progid: does not feel good for me – looks strange
    can you proove it if code works if you let that rule to be set to not important

    March 29, 2018 at 8:34 am #934711
    Niemitz (www.bios-tec.de)

    thanks for your comments.

    @WP     Turned UP:
    the caching issue is the first thing that I check when I run into problems like this.
    I thought about the possibility before that the media query could be overridden by other code – there are other media queries for those resolutions but none is adressing those classes in any way. I’ll doublecheck that again to be sure.


    @Guenni007    : thanks for your tip – i just checked and it also works without the important rule. I’m by no means an expert in CSS-coding, so thanks for the correction.

    March 29, 2018 at 3:56 pm #934880
    Niemitz (www.bios-tec.de)

    well shame on me, after fiddling around for some hours I found out that i haven’t fully cleared the browser cache on my phone.
    On top one blank space was missing in my code which was the reason why some code was not working in mobile view.

    Thanks anyway for your comments, esp WP Turned up – you were right from the start :P

    March 29, 2018 at 4:06 pm #934885
    WP Turned UP

    Glad you figured it out!

    March 30, 2018 at 10:24 am #935209
    Vinay

    Hi,

    We recommend deactivating the caching plugin during the development phase or when you make any changes tot he site especially CSS changes. It will be much easier to review the changes.

    However, I’m glad you were able to figure it out.

    We will close this ticket now, please feel free to open a new ticket if you have any questions.

    Thank you for using Enfold :)

    Best regards,
    Vinay

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.