Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #957615

    Hi guys,

    When I check the website I’m developing on ipad mini in portrait mode, the header changes from white to green. The rest of the elements look smushed.

    <EDIT> The color of the header has something to do with the color of the socket. When I change the color of the socket, the header color on mobile changes too?

    How can I fix this?

    Thanks in advance :)

    Sincerely,
    Morticka

    • This topic was modified 1 year, 7 months ago by  Morticka.
    #958516

    Hello?

    #958524

    Hi Barb!

    Hope you are doing well :)

    I added following code to bottom of Style.css file of your child theme

    .responsive.html_mobile_menu_tablet #top #wrap_all #header.av_header_transparency {
        background-color: white;
    }
    @media only screen and (max-width: 990px) { 
    #inschrijven .flex_column_table_cell {
        display: block;
        width: 100%;
    }
    #inschrijven .flex_column_table {
        display: block;
    }}

    Please review your website :)

    Best regards,
    Yigit

    #958574

    Hey Yigit, long time, hope you’re doing good too!! :D

    Thx so much, this solved the header/socket problem, do you know what caused it?

    And how can I “un-smush” the rest of the elements including in landscape as well? Do I use the separate screen options of each element?

    Sincerely,
    Barb

    #958578

    Hey Barb!

    I’m doing good too, thanks! :)

    By default, transparent header is disabled on mobile so it displays the header in body background color, in your case green :) I simply set it to white.

    You can add following code to Quick CSS to display each column full width on landscape mode

    @media only screen and (max-width: 768px) { 
    .responsive .flex_column {
        width: 100%;
        margin-left: 0;
    }}

    Cheers!
    Yigit

    #958585

    Hi Yigit,

    Yessss, looking better, thx!! :D

    The CTA above the fold in landscape mode is still smushed though, how can I fix this?

    And can I make the stroke around the pictures in the tab section responsive? (I’ve added the stroke in the column.)

    Sincerely,
    Barb

    #958589

    Hi Barb,

    1- Can you please post a screenshot of the issue?

    2- Please go to Enfold theme options > Layout Builder and check “Show element options for developers” and then edit your element and give it a custom CSS class (“my-custom-class” in example below) and then add following code to Quick CSS field in Enfold theme options > General Styling tab

    .my-custom-class img { border: 1px solid #333333; }
    

    Best regards,
    Yigit

    #958615

    Hi Yigit,

    It’s the same issue I had in portrait mode, only this time in landscape, see private data nr 1. :)

    I’ve tried targeting the tabsection, column and finally the image in the tab section with a custom id, but that does not work? With just a column stroke it looks stretched out on mobile, see nr2 and 3 and finally 4 without a stroke

    How can I fix it?

    Sincerely,
    Barb

    #958754

    Hi,

    1- I changed the code to following one

    @media only screen and (max-width: 1240px) { 
    #inschrijven .flex_column {
        width: 100%;
    }}

    2- I added custom CSS class to your Tab Section element and added following custom CSS code to bottom of Style.css file of your child theme

    .tab-img-border img { border: 2px solid #333333 !important; }

    Please delete border from your columns.

    Please review your website :)

    Best regards,
    Yigit

    #959039

    Yigit, as usual, you rock!!! Thank you, it looks so much better now :D

    You can close this one.

    Sincerely,
    Barb

    #959381

    Hi Morticka,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.