-
Posts
-
Hi
I have gone with the wider theme and have tried to make the sidebar slimmer. The code I have used is below. This has worked on my monitor, which is in the min-width: 1140px. I tried to changed the other width’s accordingly but they are clearly out as the sidebar is much too small on smaller monitors and doesn’t look right on larger ones. Would you be able to help me with the correct widths, bearing in mind the second one (for min-width:1140px) is the only correct one?
@media only screen and (min-width: 1340px) {
.responsive_large .container .nine.units {
width: 1000px;
}
}
@media only screen and (min-width: 1140px) {
.responsive .container .nine.units {
width: 950px;
}
}
.container .nine.units {
width: 929px;
}
@media only screen and (max-width: 989px) and (min-width: 768px) {
.responsive .container .nine.units {
width: 779px;
}
}
The url of my site, if you want to see how it looks on different monitors is: http://tinyurl.com/ptdrqs4
Thanks,
Rob
Hi Rob,
Instead of using the above css and then having to adjust the whole grid, go to your functions.php file in the theme files and look for:
$avia_config['layout']['fullsize'] = array('content' => 'twelve alpha', 'sidebar' => 'hidden', 'meta' => 'two alpha', 'entry' => 'eleven');
$avia_config['layout']['sidebar_left'] = array('content' => 'nine', 'sidebar' => 'three alpha' ,'meta' => 'two alpha', 'entry' => 'nine');
$avia_config['layout']['sidebar_right'] = array('content' => 'nine alpha', 'sidebar' => 'three alpha', 'meta' => 'two alpha', 'entry' => 'nine alpha');You can define your own values for the sidebar_left and sidebar_right. So instead of “nine” grid units for the content and “three” for the sidebar you could change it to be “ten” and “two” which would give you a bigger content and smaller sidebar.
Regards,
Devin
- The topic ‘Changing the sidebar width and keeping it responsive’ is closed to new replies.