Sidebar drops to bottom

[realestateradio]

when viewing my site on a Windows Tablet at 1920x1080 the sidebar is dropping to the bottom.
If I want to change either the content body width or sidebar width for correct viewing on a tablet.

so my question is what what do I change and in what section in css is for the tablet view? to look correct

I looks great on my Lenovo yoga @ laptop, 1920x1080 and higher

see http://realestateradioshow.com on a tablet 🙂

Thanks for any help you guys and guys can offer 🙂

http://realestateradioshow.com

[jbergen]

Hi,

One way to fix this is to change the widths of the content and sidebar to percentages rather than px widths.

I changed the content to width: 68.2778%; and sidebar to width: 27.0833%; and the sidebar stopped dropping to the bottom at 1200px wide.

style.css, line 1612:

.sidebar-primary {
    width: 27.0833%;
}

style.css, line 1607:

.content {
    width: 68.2778%;
}

Now the columns will shrink slightly as the browser gets narrower, and the sidebar will go below the content at screen widths <= 960px.

I hope that helps!
Jamie

---

Jamie @ Ladebug Studios

[realestateradio]

That worked great, ran into a little problem, well 2

1)the content text is right up against the edge of screen when I shrink browser window. can I force it to stay away from left side say 50px ?

2)second is how hard is it to tell the sidebar to disappear when menu becomes hamburger

[jbergen]

1) To move the content text away from the left edge, you can change padding-left to 40px. I chose 40px because that's the amount of padding on the right side of the content block.

style.css, line 474 (change last line):

.content-sidebar .content {
    border-left: medium none;
    float: left;
    padding-left: 40px;
}

If you only want this to happen in smaller browsers, you can instead add this rule to the appropriate media query.

2) It looks like your menu goes to hamburger at a browser width of 1200 px wide. If you really want your sidebar to disappear, you can add display: none; to that media query. You'll also want to tell the content area to be 100% to fill the width of the screen:

style.css, line 1630 (add the last two rules):

@media only screen and (max-width: 1200px) {

    #responsive-menu-icon {
        margin-top: 20px;
    }

    #menu-main-nav {
        margin-bottom: 20px;
    }
	
    .sidebar-primary {
        display: none;
    }

    .content {
        width: 100%;
    }
	
}

If you simply want your sidebar to display below the content (and not disappear), you can change it to width: 100%; in the media query for 1200px:

Jamie

---

Jamie @ Ladebug Studios

[realestateradio]

Fantastic, your on my birthday list 🙂

[Author]

Posts