Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #27556

    I’d like to use the Responsive Design Layout default (max width: 1030px) with a right sidebar increased to a content width of 300px and less margin of inner_sidebar of 30px (the only thing I’ve got).

    I spent hours to customize but failed due my own stupidity.

    What do I need to enter in the Quick CSS Option?



    First, you need to decrease the template content div.

    @media only screen and (min-width: 1140px) {
    .responsive .container .nine.units {
    width: 660px;

    The sidebar’s width will increase automatically on this screen width because it is set to 100%.

    You need to use Media Queries to target the next screen size for the content, the sidebar will follow:

    .container .nine.units {
    width: 570px;

    And another, to target smaller screen sizes:

    @media only screen and (max-width: 989px) and (min-width: 768px) {
    .responsive .container .nine.units {
    width: 399px;

    We decrease the content width by 100px for each screen sizes therefore you will have a 100px bigger sidebar.




    Got it :)

    Thanks for help Ismael!


    Glad Ismael could help :)

    Let us know if you have any other questions or issues.



Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Increase sidebar width’ is closed to new replies.