Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • September 17, 2014 at 10:58 pm #320776
    slimmer1

    Hello,
    Thanks for great support and theme. The website looks great on desktop but when viewing on mobile, there becomes too much space between each element. I want a more compressed layout for the mobile version, just like when viewing on desktop. Like there is too much top and bottom padding to every element. Is there an easy way to fix this? Maybe just some default overall css to change default padding on elements viewing on mobile? Or something else? I have left a link to the website in private.
    Thanks for the help!

    Kind regards

    September 18, 2014 at 5:31 pm #321332
    Yigit

    Hey slimmer1!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 480px) {
.content, .sidebar { padding-top: 10px; padding-bottom: 10px; }}

    Cheers!
    Yigit

    September 18, 2014 at 9:35 pm #321504
    slimmer1

    Hello,
    Thanks for the help! But it really doesn’t do anything at all, still got the same spaces.. Any suggestions?
    thank you!

    Kind regards

    September 18, 2014 at 10:36 pm #321537
    Yigit

    Hey!

    Have you tried flusing browser cache on your mobile device? Top and bottom paddings are not decreased to 40px and to 20px instead of using default 50px

    Regards,
    Yigit

    September 19, 2014 at 12:07 am #321586
    slimmer1
    This reply has been marked as private.
    September 19, 2014 at 10:21 am #321783
    Ismael

    Hi!

    You’re using a minify plugin. Please disable it first then add the css snippets. Use this:

    .content, .sidebar {
padding-top: 10px;
padding-bottom: 10px;
}

@media only screen and (max-width: 767px) and (min-width: 480px) {
.responsive .container .one.unit, .responsive .container .one.units, .responsive .container .two.units, .responsive .container .three.units, .responsive .container .four.units, .responsive .container .five.units, .responsive .container .six.units, .responsive .container .seven.units, .responsive .container .eight.units, .responsive .container .nine.units, .responsive .container .ten.units, .responsive .container .eleven.units, .responsive .container .twelve.units, .responsive #top #wrap_all .flex_column {
margin-bottom: 0;
}
}

    Best regards,
    Ismael

    September 19, 2014 at 10:47 am #321797
    slimmer1
    This reply has been marked as private.
    September 19, 2014 at 1:36 pm #321879
    Yigit

    Hey!

    You can disable minifying feature, apply the code and then re-enable

    Best regards,
    Yigit

    September 19, 2014 at 5:03 pm #321983
    slimmer1
    This reply has been marked as private.
    September 20, 2014 at 9:09 am #322249
    Ismael

    Hey!

    Alright. Please add the css snippets on the css > custom.css file and on the Quick CSS field as well. Add this on functions.php to exclude some stylesheets on the BWP minify plugin:

    add_filter('bwp_minify_style_ignore', 'exclude_my_css');
 
function exclude_my_css($excluded)
{
    $excluded = array('avia-custom', 'avia-layout', 'avia-dynamic');
    return $excluded;
}

    Purge the plugin cache and the browser cache then check the page.

    Best regards,
    Ismael

    September 28, 2014 at 6:15 pm #326189
    slimmer1

    Hello Ismael,
    Thanks! I have now added the css to the quick css AND the custom.css. Also added the code to functions.php – but still there isn’t any difference at all. I still get this weird spacing/ white room between the elements on my website when only viewing on mobile. If it is you can access the website yourself (have left login information in previous post). Please help and I really do appreciate your time. Thank you very much.

    Kind regards

    September 28, 2014 at 8:46 pm #326224
    macatokio

    Hi, have been noticing the same, too white space on both sides of any small display (minus than 1000px screen resolution).

    Might we give a try using width percentage ?

    
media="all"
@media only screen and (max-width: 767px)
.responsive .container {
width: 94%;
margin: 0 auto;
}

media="all"
@media only screen and (max-width: 767px)
.responsive .container {
width: 94%;
margin: 0 auto;
}

    Thanks

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Too much spacing when viewing on mobile’ is closed to new replies.