• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

No Margin On Responsive Sizes

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › No Margin On Responsive Sizes

This topic is: not resolved

Tagged: bottom, Margin, missing, responsive

  • This topic has 4 replies, 2 voices, and was last updated 8 years, 7 months ago by Porter.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • February 2, 2015 at 9:58 am #139412
    Porter
    Participant

    My primary page has a bunch of widgetized areas, each with 40px of margin on the bottom. This works fine on the desktop version, and on most other layouts, but as soon as the responsive code kicks in to where it's a single column, all of my margin disappears (the images are just stacked on top of each other, with no space).

    Any ideas why the margin is gone in this view, and how I can add it?

    Page - anightinburlington.com


    Buy me a beer? | Try DigitalOcean VPS Hosting

    February 4, 2015 at 10:04 am #139652
    Porter
    Participant

    echo('bump');


    Buy me a beer? | Try DigitalOcean VPS Hosting

    February 4, 2015 at 7:53 pm #139746
    Porter
    Participant

    forum.bump();


    Buy me a beer? | Try DigitalOcean VPS Hosting

    February 5, 2015 at 6:04 am #139782
    Christina
    Participant

    Towards the bottom of your stylesheet, you'll find this:
    @media only screen and (max-width: 800px) {
    Under that, you'll see this code:

    	.five-sixths,
    	.four-sixths,
    	.one-fourth,
    	.one-half,
    	.one-sixth,
    	.one-third,
    	.three-fourths,
    	.three-sixths,
    	.two-fourths,
    	.two-sixths,
    	.two-thirds {
    		margin: 0;
    		width: 100%;
    	}

    Change the margin to:
    margin: 0 0 3%;
    Or whatever number you'd like. Percentages look better on mobile than fixed pixels.

    February 6, 2015 at 10:37 pm #140012
    Porter
    Participant

    Thanks, that was the spot causing the issue. I can either change that, or simply add a specific media query for my front-page-widget class. I didn't think the above css would override my specific front-page-widget class (non-media query), but I guess I was wrong. Any specific reason why it did?


    Buy me a beer? | Try DigitalOcean VPS Hosting

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble