dustyhawk
asked 6 years ago

Image Hosted by UploadHouse.com As per the screenshot above, i have added the following CSS #sidebar-secondary { width: 360px; #sidebar { width: 165 px; } #container { padding-left: 1px; } My questions are
 
1. in the part of <-Space-> , how do i increase the width of that part so that the text in it will be roughly the same width as <–Space 2–>  ?
2. in the secondary sidebar area, I would like to get each widget to be able to contain items that have a larger width, e.g. 300px

2 Answers
DominicStaff
answered 6 years ago

1. To change width of the left sidebar, you can add the following code to the “Header Code”

 <style>
#sidebar {
    width: 200px;
}
#main {
    padding: 50px 8px 10px 200px;
}
</style>  

2. To change the secondary sidebar, please add the following code to the “Header Code”

 <style>
#sidebar-secondary {
    width: 300px;
}

.widget-inner {
    max-width: 100%;
}
</style>

Hope this helps !

Adrian Ramirez
replied 6 years ago

Then the responsive design is broken, any fix for that?

Dominic Staff
replied 6 years ago

Please add the following code to the “Header Code”

@media only screen and (max-width: 985px) {
#main {
padding: 50px 10px 10px !important;
}
}

İlhan Özen
answered 5 years ago

Hi, I got problem in responsive design too after I added codes above to make sidebar wider. I added this code below that you shared exactly to the end of lines in "Header Code" but I only get it as a text on my main page. I tried to add the code to header.php and "Header Code" section in Customize/Custom Code/Header Code but I only get it asa text in main page. Please help.

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

main {

padding: 50px 10px 10px !important;
}
}

ozenilhan
replied 5 years ago

Oh I solved now! Need to take the code between style tags like this:

And write it to appereance/customize/custom code/header code.

ozenilhan
replied 5 years ago

Oh I wrote but where style tags gone?

dominic Staff
replied 5 years ago

You can needn’t use this code in the "customize/custom code/header code" section which you can add this code to the style.css file that needn’t to take the code between style tags. 😀
Note: At the moment, will not display the "style" tags at here.

Powered by DW Question & Answer Pro