Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • August 12, 2019 at 4:04 am #1126700
    Sandy

    The blog titles in Blog Post Grid Layout on mobile are overlapping. I’d like to make the titles smaller on mobile only to prevent this (or can text be forced to hyphen break correctly across lines?). The page intro paragraph (which is also H1) and any other text should not be affected.

    August 12, 2019 at 7:13 pm #1126919
    Victoria

    Hey m,

    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){
     #top #wrap_all .all_colors h3 {
        font-size: 22px;
     }
     #top #wrap_all .all_colors h1 {
        font-size: 28px;
     }
 }

    If you need further assistance please let us know.

    Best regards,
    Victoria

    August 12, 2019 at 7:37 pm #1126928
    Sandy

    Should a css style name be added to Blog Post, Screen Options tab, “Custom Css Class” section? Or just leave that field empty?

    August 12, 2019 at 8:01 pm #1126956
    Sandy

    It didn’t work in Quick CSS, so I added it to the child theme CSS file as you suggested. It corrects the blog titles on that page, but it also affects the H1 title on that page, as well as H1 and H3 text on other pages, making them too small. Only the blog titles on that one page on mobile need to be smaller.

    Alternatively, on mobile, the blog posts can be single column, instead of double column, in order to resolve the overlap issue.

    August 13, 2019 at 8:21 pm #1127410
    Basilis

    Hi,

    before the CSS code use .blog and this will do replace the functionality to work only on the blog page

    Best regards,
    Basilis

    August 13, 2019 at 8:24 pm #1127413
    Sandy

    Where exactly in the code?

    August 13, 2019 at 8:35 pm #1127415
    Sandy

    I tried a few variations, but none work.

    August 14, 2019 at 2:54 pm #1127629
    Sandy

    I tried this too, but it didn’t work.

    August 15, 2019 at 2:03 pm #1127929
    Victoria

    Hi m s,

    Please remove the code I gave you before and try this:

    

 @media only screen and (max-width:767px){
     #top #wrap_all .all_colors .avia-content-slider h3 {
        font-size: 22px;
     }
     #top #wrap_all .all_colors .avia-content-slider h1 {
        font-size: 28px;
     }
 }

    Best regards,
    Victoria

    August 15, 2019 at 9:05 pm #1128081
    Sandy

    Thank you, that seems to work.

    August 16, 2019 at 9:17 am #1128188
    Rikard

    Hi,

    Great, I’m glad that you got it working. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

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