Mobile layout doesn't fill screen

[leguel]

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

[leguel]

This reply has been marked as private.

[Raghavendra]

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).

[leguel]

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!

[Raghavendra]

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.

[leguel]

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!

[Veena]

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.

[leguel]

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 🙂

[Veena]

You can try the below custom CSS in themeoptions –

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

[leguel]

That worked!

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

Thanks so much for your help

[Veena]

Pls use the below custom CSS –

.home #title-area {
  display: none !important;
}

[Author]

Posts