• 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

Margin gap added for widget

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 › Margin gap added for widget

This topic is: not resolved

Tagged: Executive theme, Margin, widgets

  • This topic has 9 replies, 2 voices, and was last updated 9 years, 1 month ago by Davinder Singh Kainth.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • February 16, 2014 at 5:46 pm #90665
    Brain-e
    Member

    Hello I am using exec theme and I would like to know how I can add a gap on the right of the 480 layout. As you can see on the 780 they are all spaced out evenly. When the site is viewed at 480 the widgets move move below each other. I would like them to have that small gap on each. I have played about with margin size to no avail. Any clues?

    http://i.imgur.com/SpoOQA7.png
    February 17, 2014 at 8:28 am #90755
    Davinder Singh Kainth
    Member

    Try this, look for following code in style.css file

    @media only screen and (max-width: 500px) {
    
    	.entry-title {
    		font-size: 24px;
    		font-size: 2.4rem;
    	}
    
    	.content .entry-header .entry-meta .entry-comments-link {
    		display: none;
    	}
    
    }

    Replace it by following

    @media only screen and (max-width: 500px) {
    
    	.entry-title {
    		font-size: 24px;
    		font-size: 2.4rem;
    	}
    
    	.content .entry-header .entry-meta .entry-comments-link {
    		display: none;
    	}
    
          .home-top .widget {
                   margin-bottom:30px !important;
          }
    
    }

    Sunshine PRO genesis theme
    Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

    February 17, 2014 at 10:31 am #90806
    Brain-e
    Member

    Not totally what I had in mind. However that is cool and I will add it 🙂

    what I was referring to was to have a similar gap on the right hand side of the widget, that can be seen on the left side of the browser

    February 18, 2014 at 5:03 am #90926
    Davinder Singh Kainth
    Member

    Then use following code instead of above:

    @media only screen and (max-width: 500px) {
    
    	.entry-title {
    		font-size: 24px;
    		font-size: 2.4rem;
    	}
    
    	.content .entry-header .entry-meta .entry-comments-link {
    		display: none;
    	}
    
          .home-top .widget {
                   margin:30px 15px !important;
          }
    
    }

    To get exact required look, play around with margin values in above code ( margin:30px 15px !important;)


    Sunshine PRO genesis theme
    Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

    February 18, 2014 at 6:29 am #90934
    Brain-e
    Member

    still no joy!

    February 18, 2014 at 6:31 am #90935
    Davinder Singh Kainth
    Member

    Can you share your website url, I will scan through the code.


    Sunshine PRO genesis theme
    Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

    February 18, 2014 at 6:33 am #90936
    Brain-e
    Member

    it's on a local host,

    I can paste the CSS.

    February 18, 2014 at 6:58 am #90939
    Brain-e
    Member

    I'm just uploading the changes to the online site for your viewing 🙂

    February 18, 2014 at 7:12 am #90944
    Brain-e
    Member

    this is the link http://www.neuroknowhow.com/brain/

    You might also be able to help replicate the position of the gravity form button.

    I'm stumped with that too.

    I think I need to do a course.

    February 18, 2014 at 7:24 am #90947
    Davinder Singh Kainth
    Member

    Following up on previous code, replace code with this:

    @media only screen and (max-width: 500px) {
    
    	.entry-title {
    		font-size: 24px;
    		font-size: 2.4rem;
    	}
    
    	.content .entry-header .entry-meta .entry-comments-link {
    		display: none;
    	}
    
          .home-top .widget {
                   margin:30px 15px !important;
          }
    
         #text-3, #text-4 {
                   margin:20px 25px !important;
        }
    
    }

    Then check...


    Sunshine PRO genesis theme
    Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 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