Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • October 5, 2018 at 11:43 pm #1018359
    enfold

    Hi, i have a grey sidebar on my site with left padding.
    Everything is ok in desktop version, but in mobile devices left padding is missing and have a blank space to the left.

    Could you help me please?

    Thanks and have a nice day!

    October 6, 2018 at 7:29 am #1018442
    Rikard

    Hey enfold,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
.responsive #top #main .sidebar.smartphones_sidebar_active {
    padding-left: 20px;
}
}

    Best regards,
    Rikard

    October 6, 2018 at 11:37 pm #1018584
    enfold

    Hi Rikard, thanks for your assistance.
    Unfortunately, blank space still appears on mobile devices.
    It is the blank space to the left of the sidebar background (linear gradient black and grey)

    October 7, 2018 at 6:54 am #1018615
    Rikard

    Hi,

    Thanks for the feedback, though I’m not sure I understand what you want to remove anymore. Could you post screenshot highlighting the problem please?

    Best regards,
    Rikard

    October 7, 2018 at 5:07 pm #1018674
    enfold

    Hi Rikard, screenshot via private.

    Regards
    Santiago

    October 8, 2018 at 7:56 am #1018823
    Rikard

    Hi Santiago,

    Thanks for the screenshot. That space is the main container of all your content on the page. If that space is removed then all content on the page will be affected and will run to the sides of the screen. Let us know if you still want to remove it or not.

    Best regards,
    Rikard

    October 8, 2018 at 5:58 pm #1019066
    enfold

    Thanks Rikard, I understand what you mean but is there a way to just move the sidebar div (linear gradient grey to white) to the left to cover full screen on mobile devices? Besides, form fields and button, missed the right padding…

    October 8, 2018 at 6:45 pm #1019103
    Jordan Shannon

    Hi,
    Try adding this to quick css:

    @media only screen and (max-width: 767px) {
aside.sidebar{
margin-left:-45px!important;
}

.inner_sidebar{
margin-left:45px!important;
}}

    Best regards,
    Jordan Shannon

    October 9, 2018 at 3:44 pm #1019530
    enfold

    Hi Jordan, thanks!! Now div is covering full screen. But in the right side of the form, fields and button loose the right margin.
    I send link via private.

    Best Regards
    Santiago

    October 10, 2018 at 1:33 pm #1019937
    Victoria

    Hi Santiago,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 479px) {
    #gform_widget-2 {
        padding-right: 5px;
        padding-left: 5px;
    }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    October 10, 2018 at 3:35 pm #1019972
    enfold

    Hi Victoria, everything goes perfect.
    Thanks for your assistance!!

    Have a nice day
    Santiago

    October 10, 2018 at 4:13 pm #1019980
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Sidebar margin on mobile’ is closed to new replies.