Margin gap added for widget

Community Forums Forums Design Tips and Tricks Margin gap added for widget

This topic is: not resolved

This topic contains 9 replies, has 2 voices, and was last updated by  Davinder Singh Kainth 5 months, 1 week ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #90665

    Brain-e
    Participant
    Post count: 19

    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
    #90755

    Davinder Singh Kainth
    Participant
    Post count: 1197

    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;
          }
    
    }

    Need website customization services or other Genesis / WordPress help ?
    Davinder @ Design Studio iGuiding Media | My Blog | Fresh Genesis Themes Collection

    #90806

    Brain-e
    Participant
    Post count: 19

    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

    #90926

    Davinder Singh Kainth
    Participant
    Post count: 1197

    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;)


    Need website customization services or other Genesis / WordPress help ?
    Davinder @ Design Studio iGuiding Media | My Blog | Fresh Genesis Themes Collection

    #90934

    Brain-e
    Participant
    Post count: 19

    still no joy!

    #90935

    Davinder Singh Kainth
    Participant
    Post count: 1197

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


    Need website customization services or other Genesis / WordPress help ?
    Davinder @ Design Studio iGuiding Media | My Blog | Fresh Genesis Themes Collection

    #90936

    Brain-e
    Participant
    Post count: 19

    it’s on a local host,

    I can paste the CSS.

    #90939

    Brain-e
    Participant
    Post count: 19

    I’m just uploading the changes to the online site for your viewing :)

    #90944

    Brain-e
    Participant
    Post count: 19

    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.

    #90947

    Davinder Singh Kainth
    Participant
    Post count: 1197

    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…


    Need website customization services or other Genesis / WordPress help ?
    Davinder @ Design Studio iGuiding Media | My Blog | Fresh Genesis Themes Collection

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.