Trouble with margins on different resolutions

  • 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 1280×800 resolution on my laptop but I was looking at the webpage the other day from a 800×600 resolution to see how that would look and, of course, had some ‘nice’ surprises.

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

    If you look at the homepage using a 800×600 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 1280×800 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.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    If you look at the homepage using a 800×600 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.

    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.

    Thread Starter felilikesflowers

    (@felilikesflowers)

    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!

    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…

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Trouble with margins on different resolutions’ is closed to new replies.

Tags