Using calc() function in a responsive theme

[koop]

Hey all,

I have a responsive theme. On every page, I have content and a sidebar. I have this applied for the sidebar to keep it at a certain width:

.col-md-4 { padding: 20px 0 0 40px; width: 330px; }

However, given that the theme is responsive, this is causing issues where the screen size is a tad bit smaller than the total width calculated by the content + sidebar. In such cases, the sidebar is pushed all the way to the bottom of the page.

I was told that it is possible to use the calc() function to correct this issue. For example:

@media screen and (min-width: 992px) { .col-md-8 { width: calc( 100% – 370px ); } .col-md-4 { padding-left: 40px; width: 330px; } }

Anyone know how I can properly implement this?

The website by the way is: http://bit.ly/1sE1KfV

[josh]

The simplest solution would be to simply use media queries to adjust the sidebar styles as needed. What is your ideal behaviour?

[koop]

We’ll I’d like to have the sidebar appear on the side on desktops and iPads but pushed to the bottom on mobile devices.

The reason why I specified a max width of 330px in the CSS file was because the sidebar actually appeared too big with much of the space being whitespace.

[josh]

So the best thing would probably be to set a max width on the container and a fixed width on the sidebar, then use media queries to push the sidebar down below when the content gets too narrow.

[koop]

Why would you advise to set a max width on the container? Sorry if it’s a dumb question, I’m a novice when it comes to CSS

[josh]

No worries :) That way the content will have a fluid width between the max and where the media queries kick in (as the sidebar has a fixed width).

[koop]

But given that the theme is responsive, why would there be a need to specify a max on the container? There is a specified width for the sidebar but shouldn’t the width of the content adjust according to the screen size? This was actually one of my first questions as I was confused as to why I was having this problem in the first place :/

[josh]

It will adjust according to screen size, but it probably shouldn’t increase indefinitely. Lines of text are optimally read at certain widths, so you don’t want people on large screens having to scan a long way horizontally.

[Author]

Posts