Support Forums for LiveMesh Themes & Plugins › Forums › FitPro Theme Support › Mobile layout doesn't fill screen
Tagged: layout, mobile, responsive
- This topic has 10 replies, 3 voices, and was last updated 10 years ago by
Veena.
-
AuthorPosts
-
April 11, 2015 at 5:37 pm #13369
leguel
MemberHi,
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
April 11, 2015 at 5:37 pm #13370leguel
MemberThis reply has been marked as private.April 13, 2015 at 1:11 pm #13392Raghavendra
ModeratorLooks 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).
April 13, 2015 at 4:32 pm #13399leguel
MemberThanks 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!
April 14, 2015 at 1:43 pm #13416Raghavendra
ModeratorLooks 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.
April 14, 2015 at 6:45 pm #13426leguel
MemberYou’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!
April 15, 2015 at 11:23 am #13443Veena
ModeratorPls 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.
April 15, 2015 at 12:59 pm #13446leguel
MemberThanks 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 🙂
April 16, 2015 at 10:48 am #13462Veena
ModeratorYou can try the below custom CSS in themeoptions –
@media only screen and (max-width: 479px) { .social_good { padding-left: 0; }}
April 16, 2015 at 3:07 pm #13482leguel
MemberThat worked!
My Home Page “HOME” tagline is back although I have it disabled in the option …. Weird.
Thanks so much for your help
April 17, 2015 at 6:59 am #13493Veena
ModeratorPls use the below custom CSS –
.home #title-area { display: none !important; }
-
AuthorPosts
- The forum ‘FitPro Theme Support’ is closed to new topics and replies.