Okay
  Public Ticket #2367862
Headings not showing properly on mobile
Closed

Comments

  •  2
    Kecco started the conversation
    April 19, 2020 at 4:42am

    Hi,

    I am using the Image and Text Overlapping template on one of my pages and I have 2 issues:

    1. The first heading that overlaps the picture, looks fine on my laptop but on mobile is partly out of the screen so you can't read it.

    2. The second heading is not responsive like the first one. It's weird because I am trying to use h4 or h5 but only h2 and h3 are responsive.Custom Responsive Headings are off.

    I am pretty sure it's all looking ok in typography.

    Page is essentialpower.cl/comprar-test

    Thank you

  •  3,021
    Andrew replied
    April 19, 2020 at 7:52am

    Hi keccosaiu,

    Try the following custom css:

    @media only screen and (max-width: 768px){
    .wpb_wrapper h3.vc_custom_heading {
    font-size: 120px !important;
}
.wpb_wrapper h4.vc_custom_heading {
    font-size: 70px !important;
}
}

    Hope this helps.

  •  2
    Kecco replied
    April 19, 2020 at 7:14pm

    Ok thank you.

    It worked for the second heading h4 because it was already in the canvas. The first heading h3 is now not resizing. Removing the first part of the code makes the h3 resize perfectly.

    The problem is that the first heading is still off canvas.

    What I want to achieve is to have the two headings one above the other on mobile. I show you in the attachment what is happening now and what I want to happen (only on mobile).


        .wpb_wrapper h3.vc_custom_heading {
        font-size: 120px !important; I DON'T NEED THIS HERE BUT I NEED TO ADJUST PADDING BACK TO 0 ON MOBILE
    }
    .wpb_wrapper h4.vc_custom_heading {
        font-size: 60px !important; THIS WORKS FINE
    }
    }

    Maybe you can help me with some code to adjust the padding


  •  3,021
    Andrew replied
    April 20, 2020 at 8:15am

    Hi keccosaiu,

    Use the following custom css:

    @media only screen and (max-width: 768px){
.wpb_wrapper h3.vc_custom_heading {
    padding-left: 90px !important;
    font-size: 100px !important;
}
}

    Below is how it will look

    4694960709.png

    Kind regards.

  •  2
    Kecco replied
    April 20, 2020 at 9:33pm

    Thanks, good now.

    Will I always have to play with this anytime that I want overlapping things in between columns on desktop?

  •  2
    Kecco replied
    April 30, 2020 at 9:57pm

    Hi, I haven't received a response to my last question. Anyway, regarding this same issue, when I reduce size of the screen, at some stage the heading is out of canvas again, before it get's back in. The code you gave me works only when the screen is small enough. Also, the heading resizes twice, I guess I need to play with custom responsive settings. Can you help me with this? I attach a photo so you can better see what I mean. 

    Thanks

  •  3,021
    Andrew replied
    May 1, 2020 at 8:12am

    Hi Kecco,

    The page which has the heading is no longer found on the link.

    http://essentialpower.cl/comprar-test

    Where can we check so that we investigate and see possible solution.

    Thanks.

  •  2
    Kecco replied
    May 1, 2020 at 7:05pm

    www.essentialpower.cl/comprar that's the one, sorry about that

  •  3,021
    Andrew replied
    May 1, 2020 at 7:41pm

    Hi Kecco,

    Try the following css:

    @media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { 
    .wpb_wrapper h4.vc_custom_heading {
    font-size: 100px !important;
    text-align: center !important;
}
.wpb_wrapper h3.vc_custom_heading {
    font-size: 120px !important;
}
}

    Kind regards.

  •  2
    Kecco replied
    May 6, 2020 at 7:55pm

    Hi Andrew, thanks for getting back to me.

    With that code it doesn't look good, h3 is out of screen.

    I am now using this code 

    @media only screen and (max-width: 768px){
        .wpb_wrapper h3.vc_custom_heading {
            font-size: 80px !important;
        padding-left: 140px !important;
            text-align: left !important;
    }
.wpb_wrapper h4.vc_custom_heading {
        font-size: 60px !important;
        text-align: left !important;
        padding-left: 97px !important;
}
    }

    And it looks fine with laptop and small mobile screen. On bigger size mobile, h3 it's still out of screen and h3 get's resized too much.

    Screenshots:

    1. Laptop, looks fine

    2. Smaller screen, I can see h3 but it's out of the column and text size is too small

    3. Even smaller screen, h3 goes out of screen and text size is too small

    4. Even smaller screen, now looks good again and text size is ok

    Even h4 get resized twice but I don't mind that one.

    How can I tweak that code so the text resizing and alignment happens with bigger screen? Skipping 2 and 3 scenarios.

    Thanks a lot

  •  3,021
    Andrew replied
    May 7, 2020 at 7:36pm

    Hi Kecco,

    Could you allow us to log in to your website backend dashboard so we can check on this for you more?. We are gonna need the username and password of admin user as well as the login url.

    Thanks.

  •   Kecco replied privately
  •  3,021
    Andrew replied
    May 10, 2020 at 6:20pm

    Hi Kecco,

    I update the earlier sent css on your website and looks much better now. Confirm.

    Thanks.

  •  2
    Kecco replied
    May 10, 2020 at 11:46pm

    Hi, thank you!

    Yes it looks good, however, on a certain size window h3 is still out.

    Looks like that responsive settings are kicking in before your css code, so it looks good than bad than good again (respectively big screen, medium screen, small screen).

    Let's leave it like that for now since I believe I will change the look of that page in not too long.

    Thanks a lot for your support