Problems with the mobile version

  • Unknown's avatar

    Hello!
    I have problems with the mobil version on my website.

    1) On the main page i have a big (half my screen) blank space between the word Menu and the gallery

    2) The titles on my ‘categories’ (for exemple : latest from chill and watch) are on top of eachother so you can’t read anything

    3) There is big spaces in between the lines sur titles of my articles

    4) i can have only 15 characters per line on the preview of my papers (still on the main page) and it doesnt look nice.

    Can you go check and help me please ? It doesn’t seem i can attach pictures on the post here.

    Thanks a lot !

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar

    Hi there – thanks for the message. Lets see if we can solve these.

    1) It looks like featured content is setup for your site. If you disable this then that gap will go away. You can disable it by going to admin > appearance > customize > Featured Content and then remove the featured tag and it should go away.

    2) The latest from chill and watch heading seems to have a line-height of 0 set. This will make the text overlap when the line is too short. If you set this to 1 it will be readable.

    3) Some custom css can fix this:

    h2 {
    line-height: 1.4;
    }

    4) The block with the columns in it has a white background currently. Adding a background adds space around the content. If you remove the background colour then the padding will go away and the block will be a lot wider. To remove the color select a colour (orange?) and then select the same colour again to deselect it entirely.

    Thanks – Ben

  • Unknown's avatar

    Thanks you a lot Ben for helping me !
    i’ve been able to fix most of my issues except the blank space :(. I tried to remove the featured, but it doesnt change anything :(

  • Unknown's avatar

    Glad that fixed most of them.

    Removing the featured tag should have fixed it, but since it doesn’t we always have custom css to hide things like this :)

    I would use the following. This adds a small margin at the top to stop the content squashing against the site header, but it’s nothing like the gap that was there before.

    .featured-post {
        display: none !important;
    }
    
    header.masthead {
        margin-bottom: 2rem;
    }

    Thanks – Ben

  • Unknown's avatar

    thanks a lot !! i wish i was able to use CSS by myself lol ! i need to learn

  • Unknown's avatar

    hey it’s me again (lol)

    since i wrote this in the CSS :

    .featured-post {
    display: none !important;
    }

    header.masthead {
    margin-bottom: 1rem;
    }

    I have no more titles on my articles and no more picture… how can i solve that ?

    thanks !

  • Unknown's avatar

    Oh no! Really sorry about that.

    Change it to this and it will only affect the homepage.

    .home .featured-post {
    display: none !important;
    }
    
    .home header.masthead {
    margin-bottom: 1rem;
    }

    Ben

  • Unknown's avatar
  • The topic ‘Problems with the mobile version’ is closed to new replies.