• Resolved jbkeefer

    (@jbkeefer)


    Hello all,

    I am trying to adjust the margins on the mobile view in storefront.

    I can not determine the correct selector and changes to the main body alters the standard full browser view. Looks like once below 768 px the template changes to mobile view.

    The text and other elements are going right to the edge of the display on my test device lg g4, and i would like to put in at least 10-20 px.

    Thank you,

    Jamie

Viewing 11 replies - 1 through 11 (of 11 total)
  • Hey,

    This is controlled by the margins applied to .col-full. The content shouldn’t go to the edge of the screen though. Please share your URL and I’ll investigate.

    Thanks

    Thread Starter jbkeefer

    (@jbkeefer)

    Tie-a-dye.com

    There is a tweak to col-full in style.css but the margin-left is set to the theme default “auto.”

    Thanks for taking a look.

    Jamie

    Hey,

    Yeah, that’s the issue, you’ll need to remove that, or wrap it in a media query so that it isn’t applied to mobile.

    Storefront core doesn’t behave this way as you can see on the demo: http://demo2.woothemes.com/storefront/product-category/clothing/

    Thanks

    Thread Starter jbkeefer

    (@jbkeefer)

    I removed that setting…which was just copied from the “inspect element” with a tweak to other settings… and there is no difference.

    I even commented out all custom CSS and it’s still has no left margin or padding.

    ??

    I compared css in inspector on your link to mine and there there is no difference in the styles.

    What extensions do you have added to your site…one the customer style plugins perhaps?

    Jamie

    Thread Starter jbkeefer

    (@jbkeefer)

    Attempts to set the col-full to what is revealed in the inspector on your site…

    .col-full {
    margin-left: 2.618em;
    margin-right: 2.618em;
    }

    Has no effect on my site.

    There is a col-full:after (768) on your site that implies there is some JS coding to create the classes and I can not seem to override the css.

    Feasible?

    Jamie

    Thread Starter jbkeefer

    (@jbkeefer)

    When I reduce the desktop broswer to mobile width I do not have the problem with no margins.

    Is there any code that recognizes mobile devices in the core that might be setting width to 100%?

    I am using chrome browser on android device and all elements on the page (top to bottom, logo etc.) lack any margin.

    Thread Starter jbkeefer

    (@jbkeefer)

    Issue resolved.

    It was Jetpack. I activated mobile friendly theme on jetpack and it looks great! 🙂

    Sorry for the trouble.

    Woohoo!

    Thread Starter jbkeefer

    (@jbkeefer)

    Footnote…

    Jet pack was not causing the problem. I disabled it and the mobile version of the storefront was still riding the edge of the display with no margins.

    Even though the jeypacck mobile theme has advantages, I notice it is not compatible with their own social sharing plugin. Now I have to go bacck to the drawing board.

    *sigh*

    Jamie

    Thread Starter jbkeefer

    (@jbkeefer)

    All is well.

    disabled jetpack mobile theme, cleared cache and display is good.

    fun stuff…

    🙂

    Jamie

    Thread Starter jbkeefer

    (@jbkeefer)

    All is well.

    disabled jetpack mobile theme, cleared cache and display is good.

    fun stuff…

    🙂

    Jamie

    hehe, glad this is all sorted!

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Mobile margins too close to edge’ is closed to new replies.