Mobile layout doesn't fill screen

Support Forums for LiveMesh Themes & Plugins Forums FitPro Theme Support Mobile layout doesn't fill screen

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #13369
    Leguelleguel
    Member

    Hi,

    when I go on my site on mobile, it is all centered and doesn’t fill the screen which makes it look sketchy (social icons vertically aligned versus horizontal, big paragraph, not good reading experience, etc)

    On the blog, on mobile the picture is scaled fine but on browser the post picture is WAY too big.

    Also, Title logo doesn’t scale and gets hidden under menu button!

    Thanks for the help

    • This topic was modified 5 years, 6 months ago by Leguelleguel.
    #13370
    Leguelleguel
    Member
    This reply has been marked as private.
    #13392
    RaghavendraRaghavendra
    Moderator

    Looks like the following Custom CSS in style.css is causing issues –

    body {
      margin: 5em; 
    }
    

    If you remove the same, things should look better.

    Also, the social icons are each in their own columns. This look fine in desktop but on mobile they stack below one another as per design in Visual Composer (or any other framework for that matter). You will need to move them all into one column and then style it such it they are placed one after another in a single line (using floats or with inline-block display).

    #13399
    Leguelleguel
    Member

    Thanks meteorite!

    I tried the method mentioned above using some code I found on code pen, created a class and they all seem to stack on top of each other.

    Also, on mobile, it doesn’t fit the whole screen and looks REALLY bad.

    But the logo got fixed thanks!

    #13416
    RaghavendraRaghavendra
    Moderator

    Looks the code body { margin: 5em; } is still there. If you remove the same things will be better. Regarding the social icons, phoenix will help you with a code snippet which should take care of the layout in desktop and mobile. Stay tuned.

    #13426
    Leguelleguel
    Member

    You’re the man! I was looking in Theme Options, my bad!

    Thanks for getting your friend on this also!

    Last question: if I wanted to use the icon set included, what should I use to insert it in visual composer? Blank html? and remodel it using CSS.

    What class would I link it to? I tried using the code mentioned in the tutorial to no avail.

    Thanks so much!

    #13443
    VeenaVeena
    Moderator

    Pls try the below custom CSS in themeoptions –

    .social_good {
      position: relative;
      display: inline-block;
      padding-left: 15%;
      text-align: center !important;
      transform: none !important;
    }
    .social_good :hover {
      padding: 0;
      margin-left: 0;
      transform: none !important;
    }
    

    In visualcomposer you can add icon element or you can add text block and insert the icon shortcode.

    #13446
    Leguelleguel
    Member

    Thanks pheonix!

    In mobile though it stacks 2 bu 2 instead of being aligned all 4 like in desktop, how to fix?

    Thanks for the cue for icon! Gotcha 🙂

    #13462
    VeenaVeena
    Moderator

    You can try the below custom CSS in themeoptions –

    @media only screen and (max-width: 479px)
    {
    .social_good {
      padding-left: 0;
    }}
    
    #13482
    Leguelleguel
    Member

    That worked!

    My Home Page “HOME” tagline is back although I have it disabled in the option …. Weird.

    Thanks so much for your help

    #13493
    VeenaVeena
    Moderator

    Pls use the below custom CSS –

    .home #title-area {
      display: none !important;
    }
    
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.