Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • October 19, 2020 at 5:41 pm #1254109
    tremblayly

    Hi
    I just launched thecurryqueen.com (https://thecurryqueen.com/) and on my iphone, the transparency header/logo is not displaying correctly. It takes all of the space on the device and can’t see the remaining content.

    I search here and found the following similar issue and tried the recommended CSS in general styling but it does not fix my problem: https://kriesi.at/support/topic/suppress-mobile-menu-in-transparent-mobile-header/#post-1106126

    Can someone help as soon as possible please.
    Much appreciated
    Lyse

    October 19, 2020 at 5:55 pm #1254114
    tremblayly

    Hi
    It appears to be the header text I add that is the issue. I still need help on how to fix this issue.
    Here’s the widget header text content:

    <h1 style=”color: #760008; font-size: 72pt; font-family: ‘Palace Script MT’;”>The Curry Queen™ The Curry Queen™</h1>
    <h3 style=”color: #760008; font-size: 36pt; font-family: ‘Palace Script MT’; text-indent: 25px; margin-top: -25px;”>“ Easy gourmet never tasted so good”</h3>

    Thanks
    Lyse

    October 20, 2020 at 9:27 pm #1254460
    Victoria

    Hey!

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Cheers!
    Victoria

    October 20, 2020 at 10:18 pm #1254483
    tremblayly
    This reply has been marked as private.
    October 22, 2020 at 10:03 am #1254892
    Victoria

    Hi!

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 767px) {
  .responsive #top #header #header_main .inner-container #text-6.widget {
    display: none;
  }
  #top #header #header_main .container.av-logo-container .inner-container {
    display: block !important;
  }
  #top #header #header_main .container.av-logo-container {
    margin-left: 0px !important;
  }
}

    All the css added by you to position the widget and arrange the header elements should be wrapped in the media query so that it does not apply to mobile screen sizes.

    If you need further assistance please let us know.
    Cheers!
    Victoria

    October 22, 2020 at 4:22 pm #1255010
    tremblayly

    Hi Victoria,
    Thank you, that did fixed the overlapping. However, I would like my text widget displayed but using smaller font size and image. How would I do that in this case because the CSS code says not to display the text widget.
    Thanks,
    Lyse

    October 23, 2020 at 5:10 pm #1255309
    Victoria

    Hi Lyse,

    Well, we can try to do that, but as I said above you need to add the css for the widgets in a media query so that it does not affect mobile image sizes.

    Best regards,
    Victoria

    October 26, 2020 at 6:48 pm #1255807
    tremblayly

    Hi Victoria,
    OK so I’ve added the following CC within the @media for the text widget content (however is does not work):

    @media only screen and (max-width: 767px) {
    .responsive #top #header #header_main .inner-container #text-6.widget h1 {
    color: #760008!important;
    font-size: 22pt!important;
    font-family: ‘Palace Script MT’!important;
    }
    .responsive #top #header #header_main .inner-container #text-6.widget h3 {
    color: #760008!important;
    font-size: 12pt!important;
    font-family: ‘Palace Script MT’!important;
    text-indent: 2px!important;
    margin-top: -25px!important;
    }
    .responsive #top #header #header_main .inner-container #text-6.widget img {
    width: 10px!important;
    height: 60px!important;
    }
    #header.av_header_transparency #text-6 .textwidget h1, #header.av_header_transparency #text-6 .textwidget h3 {
    color: #fff !important;
    }

    #top #header #header_main .container.av-logo-container .inner-container {
    display: block !important;
    }
    #top #header #header_main .container.av-logo-container {
    margin-left: 0px !important;
    }
    }

    Any help you can provide would be greatly appreciated.
    Thanks
    Lyse

    October 26, 2020 at 7:44 pm #1255816
    tremblayly

    Hi Victoria,

    I cleared all cache and now I see the widget on my mobile device.
    How can I move the widget to the right of the logo, even move the logo more to the left if I need to?

    Thanks
    Lyse

    October 26, 2020 at 11:29 pm #1255921
    Victoria

    Hi tremblayly,

    I adjusted the code for you, please check.

    Best regards,
    Victoria

    October 26, 2020 at 11:46 pm #1255928
    tremblayly

    Hi Victoria
    I added all @media for the different devices so that the text-widget would display properly where it should.
    I’m left with issues on the ipad (1024):
    – while in portrait mode, the burger menu is on top of the text-widget instead on below the logo like on other devices
    – while in landscape mode, the main menu is shown on the left instead of on the right.

    Any advice on how to fix those issues on those devices?

    This is incredibly a lot of work when using text-widgets. I hope the theme developer can make this easier in next upgrades.

    Thanks
    Lyse

    October 27, 2020 at 12:16 am #1255934
    tremblayly

    Hi Victoria
    Here’s my CSS looks like now:
    @media only screen and (max-width: 1024px) {
    .responsive #top #header #header_main .inner-container #text-6.widget h1 {
    color: #760008!important;
    font-size: 28pt!important;
    font-family: ‘Palace Script MT’!important;
    margin-top: 0px!important;
    margin-left: -15px!important;
    }
    .responsive #top #header #header_main .inner-container #text-6.widget h3 {
    color: #760008!important;
    font-size: 16pt!important;
    font-family: ‘Palace Script MT’!important;
    margin-left: -40px!important;
    margin-top: -20px!important;
    }

    #header.av_header_transparency #text-6 .textwidget h1, #header.av_header_transparency #text-6 .textwidget h3 {
    color: #fff !important;
    }

    #top #header #header_main .container.av-logo-container .inner-container {
    display: block !important;
    }
    #top #header #header_main .container.av-logo-container {
    margin-left: 0px !important;
    }
    }
    @media only screen and (max-width: 767px) {
    .responsive #top #header #header_main .inner-container #text-6.widget h1 {
    color: #760008!important;
    font-size: 20pt!important;
    font-family: ‘Palace Script MT’!important;
    margin-top: -100px!important;
    margin-left: 150px!important;
    }
    .responsive #top #header #header_main .inner-container #text-6.widget h3 {
    color: #760008!important;
    font-size: 10pt!important;
    font-family: ‘Palace Script MT’!important;
    margin-left: 130px!important;
    margin-top: -15px!important;
    }

    #header.av_header_transparency #text-6 .textwidget h1, #header.av_header_transparency #text-6 .textwidget h3 {
    color: #fff !important;
    }

    #top #header #header_main .container.av-logo-container .inner-container {
    display: block !important;
    }
    #top #header #header_main .container.av-logo-container {
    margin-left: 0px !important;
    }
    }
    @media only screen and (max-width: 480px) {
    .responsive #top #header #header_main .inner-container #text-6.widget h1 {
    color: #760008!important;
    font-size: 14pt!important;
    font-family: ‘Palace Script MT’!important;
    margin-top: -90px!important;
    margin-left: 140px!important;
    }
    .responsive #top #header #header_main .inner-container #text-6.widget h3 {
    color: #760008!important;
    font-size: 10pt!important;
    font-family: ‘Palace Script MT’!important;
    margin-left: 115px!important;
    margin-top: -15px!important;
    }

    #header.av_header_transparency #text-6 .textwidget h1, #header.av_header_transparency #text-6 .textwidget h3 {
    color: #fff !important;
    }

    #top #header #header_main .container.av-logo-container .inner-container {
    display: block !important;
    }
    #top #header #header_main .container.av-logo-container {
    margin-left: 0px !important;
    }
    }

    Lyse

    October 28, 2020 at 8:06 pm #1256463
    Victoria

    Hi tremblayly,

    You have the styles for the header added in the styles.css too and that css is not wrapped in the media queries and so there is a mess.

    Please check that file.

    Best regards,
    Victoria

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