Breakpoints

  • Hi!

    I’m trying to use breakpoints to make some adjustments for different devices and displays. I’m currently having an issue of certain functions not working and I don’t know why. For example, I want to change the position of the sidebar on laptops, however margin-right and weight do nothing. It worked for the primary content area, but the sidebar refuses to change for laptops, except if I change the values in breakpoint made for PC screens.

    Code:

    /* LAPTOP */

@media only screen and (min-width: 992px) {
    .sidebar-main {
        margin-right: 5%; 
	float: right;
    }
    .sidebar-content-area {
	    box-sizing: border-box;
	    margin: 0px -90px 0px 0px
    }
}

/* PC */

@media only screen and (min-width: 1200px) {
    .sidebar-main {
        position: relative;
	    float: right;
	    margin-right: -65%;
	    width: -webkit-fill-available;
	    width: -moz-available;
    }
    .sidebar-content-area {
	    width: 16%;
	    box-sizing: border-box;
	    margin: 0px -190px 0px 0px
    }
}

    Thank you for your help!

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Without looking at your specific styles…

    My junky old laptop’s screen resolution is 1536×864, and I’m sure yours will be about the same or perhaps even much higher. You’re not going to find that many laptops in the wild with the 992-1199px screen width that you’re targetting.

    https://whatsmyscreenresolution.com/

    Also, some laptops can have a higher resolution than some desktops, and vice versa. Unlike phones and tablets, there’s really no defining difference between laptop and desktop screen resolutions, and there’s no (good) reason to try and distinguish the two.

    Of course, I’m not saying you shouldn’t use this media breakpoint: you know your audience better than I do. But if you’re testing this on a laptop thinking this is the common resolution of laptops, then that would explain why the code is not working for your “laptops”.

    Thread Starter jazzu

    (@jazzu)

    Hi, @gappiah !

    Thank you for your feedback, I’ll try to change minimum and maximum width.

    The reason I’m trying to distinguish the two is because the sidebar on the page doesn’t show up correctly. I’ll add two screenshots so you can see exactly the problem that I’m having.

    PC Screenshot (How I want it to look):
    PC Screenshot

    Laptop Screenshot:
    Laptop Screenshot

    Thank you for your time!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Breakpoints’ is closed to new replies.