-
Posts
-
Hi
I changed the sidebar width so that it was slightly slimmer using the code I found in another thread. The code was as follows:
.sidebar {
width: 200px !important;
}
.content, #top .fullwidth .template-blog.content {
width: 829px !important;
}
This works how I would like it too on pages with a sidebar like: http://goo.gl/1m1GQv
It however stops the content from going the full width on pages which do not have a sidebar: http://goo.gl/zhGNbx
Is there a solution for this?
Regards,
Rob
Hi,
You should use code like this inside a @media query since otherwise it will interfere with the responsiveness of the theme. Please look inside the custom.css file and you will see 2 empty media queries , one for monitors and tablets while the other one for smartphones and mobile phones. You will need to create another media query, and make sure that yiou lower the width of the sidebar and main content area to match the screen sizes of the media query
@media only screen and (min-width: 1050px) {
/* Add your Desktop Styles here */
.sidebar {
width: 200px !important;
}
.content, #top .fullwidth .template-blog.content {
width: 829px !important;
}
}Please add the code above to /css/custom.css or to Quick Css.
Thanks,
Nick
Hi Nick
Thanks, that has kept the correct responsiveness whilst changing it mostly to how I would like it to be on a monitor. I am still having this issue however:
The spacing looks how I would like it too on pages with a sidebar like: http://goo.gl/1m1GQv
The code however stops the content from going the full width on pages which do not have a sidebar: http://goo.gl/zhGNbx
Hi Nick,
I have tried to play around with the CSS but I still can’t get it to use the full width on pages without a sidebar?
Thanks,
Rob
Hey,
Please add this on your custom.css at the very bottom:
@media only screen and (min-width: 1140px) {
.responsive .container .twelve.units {
width: 1030px !important;
}
}Regards,
Ismael
Hey Ismael,
Thanks for trying to help. I have added that code but it hasn’t solved my issue. Pages that do not have a sidebar still aren’t going to full width on a monitor. Everything is working fine on tablet’s and phone however.
Thanks,
Rob
Hi,
I tested your contact page with that code and it works fine. Please remove browser cache then reload the page.
http://www.robgibbs.co.uk/SRtestsite/contact-us
The page above looks full width to me.
Regards,
Ismael
Hi
Sorry, maybe I wasn’t clear. I meant that although the page itself is full width the content itself isn’t. On the contact page you can see that the map and contact details aren’t spread all the way across the page. You can also tell by the line in the special heading as this stops inline with the beginning of “client area” (in the menu), where as if I remove the code it stops inline with the end of “contact”. Can you see what I mean?
Regards,
Rob
Hi,
It looks ok on my end. The map is on the right edge aligning with the end of the horizontal rule.
Regards,
Ismael
Hi,
Yes, that is how it should look. Maybe it is browser specific? Which browser are you using? I have completely cleared my cache etc a good few times and this is what I still see in IE 10:
[IMG]http://i.imgur.com/vRoFFdt.jpg?1[/IMG]
I do appreciate you trying to help out btw.
Rob
Hi,
Ok here is the problem. You have this line in a file IE10 is telling me called enfold.css , this is how the css block looks
.content , #top .fullwidth . content.template-blog {
width:829px !important;
}you need to get that !important out of there, since its blocking other css for the correct size, instead put the above block in a media query for whatever size the width is supposed to be 829px. , But for the main monitor screen size the width is supposed to be 1030px (which is already in the code but the !important statement overrides it (so you need to (a) remove !important from the block above, and see what happens. Check lower screen sizes since at some point when that 829 what needed, you may see a new problem , and thats when you need to make a new css block just like the one above and put it in a media query for that screen size which has the problem.)
thanks,
Nick
Hi Nick,
Ok, thanks. I have removed the !important part on the CSS which has made the pages without a sidebar go back to their correct size. The problem is that now the sidebar and main content now don’t match up. Here’s an example:
I’m sorry but I’m a bit confused with the media queries. I want the main page content to be that width on monitors and then relative to that on device sizes where it still shows the sidebar. Maybe I have been going wrong from the start and there is a better approach. All I am trying to do is make the sidebar thinner and the main content space wider?
Thanks,
Rob
Hi Rob,
I’ve tagged the topic for Nick since he has been doing the majority of the changes here. However, what I would suggest trying if you just want to modify the sidebar width is removing all of your current css changes above and then changing what grid the theme uses for the page content and sidebars in your functions.php. 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 then modify the grid number used for content and sidebar. They must equal twelve in total but you can change it from using 9/3 to 8/4 easily.
Regards,
Devin
I would like to make my sidebar widget smaller using the right sidebar template. I have copied the code you refer to above into my child theme and attempted to edit the 9/3 to no avail. The sidebar has not moved. I tried 11/1 and 8/4 but no movement. What am I doing wrong? Thank you for your help.
What part of it did you copy to your child theme? Did you include the entire function so that it completely replaces the parent function?
This is what I added to the custom css (reflects changes to 8/4)
$avia_config[‘layout’][‘fullsize’] = array(‘content’ => ‘twelve alpha’, ‘sidebar’ => ‘hidden’, ‘meta’ => ‘two alpha’, ‘entry’ => ‘eleven’);
$avia_config[‘layout’][‘sidebar_left’] = array(‘content’ => ‘eight’, ‘sidebar’ => ‘four alpha’ ,’meta’ => ‘two alpha’, ‘entry’ => ‘eleven’);
$avia_config[‘layout’][‘sidebar_right’] = array(‘content’ => ‘eight alpha’, ‘sidebar’ => ‘four alpha’, ‘meta’ => ‘two alpha’, ‘entry’ => ‘eleven alpha’);Sorry – I actually added this to the child functions.php
}
$avia_config[‘layout’][‘fullsize’] = array(‘content’ => ‘twelve alpha’, ‘sidebar’ => ‘hidden’, ‘meta’ => ‘two alpha’, ‘entry’ => ‘eleven’);
$avia_config[‘layout’][‘sidebar_left’] = array(‘content’ => ‘ten’, ‘sidebar’ => ‘two alpha’ ,’meta’ => ‘two alpha’, ‘entry’ => ‘nine’);
$avia_config[‘layout’][‘sidebar_right’] = array(‘content’ => ‘ten alpha’, ‘sidebar’ => ‘two alpha’, ‘meta’ => ‘two alpha’, ‘entry’ => ‘nine alpha’);Hey,
I tested this on my end and yes the code doesn’t work when you place it on the child theme’s function.php. Let me tag Kriesi. Anyway, you can decrease the sidebar width using css modifications. You can increase the size of the content to push the sidebar.
@media only screen and (min-width: 1340px) { .responsive_large .container .nine.units { width: 900px; } } @media only screen and (min-width: 1140px) { .responsive .container .nine.units { width: 690px; } } .container .nine.units { width: 700px; } @media only screen and (max-width: 989px) and (min-width: 768px) { .responsive .container .nine.units { width: 520px; } }Regards,
IsmaelThis worked. I would like to make it smaller still – which numbers in the code need to be changed to do that? Thanks for your patience – I’m new to CSS.
Hi!
Depends on the browser size. On what screen size would you like to change it?
@media only screen and (min-width: 1340px) {
.responsive_large .container .nine.units {
width: 900px;
}The code above means that the nine unit container will have a width of 900px when viewing on screen larger than 1340.
@media only screen and (min-width: 1140px) {
.responsive .container .nine.units {
width: 800px;
}
}This code means that the nine unit container will have a width of 800px when viewing on screen larger than 1140.
Cheers!
Ismael
- The topic ‘Changing sidebar width’ is closed to new replies.