WordPress.org

Ready to get started?Download WordPress

Forums

Trouble with margins on different resolutions (5 posts)

  1. felilikesflowers
    Member
    Posted 1 year ago #

    Hello,
    I'm nearly done designing my website, which took me a couple of months.
    I'm using a child theme of twentyeleven.

    I am using a 1280x800 resolution on my laptop but I was looking at the webpage the other day from a 800x600 resolution to see how that would look and, of course, had some 'nice' surprises.

    The address is http://www.enlightenedinnergame.com.

    If you look at the homepage using a 800x600 resolution you see that the main container (.page-id-26.singular .entry-content) is falling out of the frame to the left.

    As soon as I try adjusting the margin in this resolution the main container will overlap the sidebar to the right in the original resolution. It seems as if it is not possible to make just minor adjustments to the margin-left property at the 1280x800 without the wole div making a big jump to the right.

    My question is, what am I missing?? There must be a way to make it look pleasing to the eye without me having to make some major layout changes on the page.

    Any help is greatly appreciated!!

    Thank you and good night.

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    If you look at the homepage using a 800x600 resolution you see that the main container (.page-id-26.singular .entry-content) is falling out of the frame to the left.

    Well you have a minus 30 and 40 pixel value on that element, at that width. Look in your Child Theme stylesheet for this.

    Any CSS-specific issues should be sought on CSS-specific forums or intuitively through a Browser Inspector tool.

  3. alchymyth
    Forum Moderator
    Posted 1 year ago #

    at 800px, one of the @media query gets active;

    check style.css for what changes in that media query, and correct it by adding @media queries for your individually positioned elements.

    for example, add this into the 800px media query at the end of your style.css:

    .page-id-26.singular .entry-content,
    .page-id-136.singular .entry-content,
    .page-id-60.singular .entry-content {
    	margin-left: 15px;
    }

    and do not forget to close that media query with a } to avoid any problems later.

  4. felilikesflowers
    Member
    Posted 1 year ago #

    Hi Andrew, Hi Alchymyth,
    thank you both for taking the time and responding to my question, I really appreciate it!

    @Alchymyth:

    Unfortunately I have no idea what this means:

    "add this into the 800px media query at the end of your style.css:"

    How would the syntax be to write a specific class just for the 800px resolution?

    Thank you so much in advance!

  5. alchymyth
    Forum Moderator
    Posted 1 year ago #

    this is already at the end of style.css of your child theme:

    /* =Responsive Structure
    ----------------------------------------------- */
    @media (max-width: 800px) {
    	/* keep the sidebar - this edit is for right sidebar only */
    #page {
    	   min-width: 500px;
             }
    .right-sidebar #main #content {
    		margin: 0 29% 0 1%;
    		width: 70%;
    }
    .right-sidebar #main #secondary {
    		float: right;
    		margin: 0 2% 0 0%;
    		width: 24%;
    }

    add any styles to it, which you need to keep your divs in the right position at lower than 800px width;

    example with the one I mentioned earlier (there might be more ?):

    /* =Responsive Structure
    ----------------------------------------------- */
    @media (max-width: 800px) {
    	/* keep the sidebar - this edit is for right sidebar only */
    #page {
    	   min-width: 500px;
             }
    .right-sidebar #main #content {
    		margin: 0 29% 0 1%;
    		width: 70%;
    }
    .right-sidebar #main #secondary {
    		float: right;
    		margin: 0 2% 0 0%;
    		width: 24%;
    }
    .page-id-26.singular .entry-content,
    .page-id-136.singular .entry-content,
    .page-id-60.singular .entry-content {
    	margin-left: 15px;
    }
    
    } /*this closing bracket was missing - it is closing the '800px media query' */

    possibly check the web about css3 media queries - search term 'css3 media query' or similar...

Topic Closed

This topic has been closed to new replies.

About this Topic