Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #22057

    I added this quick css to increase the width of the sidebar and now the site is not Responsive. Some body text also overlaps into the sidebar. Can anyone suggest what I am doing wrong and what I must do to fix it? I still want the sidebar to be 300px without errors.

    .sidebar.units.sidebar_right.three {

    width: 300px;

    }

    .content.nine.alpha.units {

    width: 600px;

    }

    .six.units.entry-content {

    width: 360px;

    }

    Thank you.

    #114059

    Hi ehong33234,

    The theme uses a grid to enable the responsive features. So when you add your own custom width for anything that uses *number*.units you are breaking the grids ability to respond to the changes in screen size.

    You’ll need to change the theme php files to use different grid sizes instead of trying to change the css.

    Regards,

    Devin

    #114060

    Hi Devin, thanks for the reply and although it is disappointing to hear, it makes sense. The only problem is that I am not a programmer and not too comfortable doing this on my own. Could you provide some PHP for me to make this change successfully to the grid? Some greater details would be much appreciated, thank you.

    #114061

    bump

    #114062

    Hi,

    There is no php. Here is the css. there is different css for various screen sizes . that’s what makes a theme responsive. The code below controls the 2 screen sizes where a sidebar is present. lower screen sizes do not have a sidebar. Add this to your quick css on the bottom , or to css/custom.css at the bottom of the page. Try the code below , it will make sidebar as you want.

    /*below is sidebar and main column for screen sizes 960px and bigger . there is 900px to work with, so if you add 100px to sidebar making it 310, make sure to subtract 100px from 690 , so it becomes 590.*/

    #top .container .three.units {
    width: 300px;
    }
    #top .container .nine.units {
    width: 600px;
    }

    /*below is responsive setting for 768-959 width screens for sidebar (3 units) and main column (9 units). total is 648px. distribute it between the two below*/

    @media only screen and (max-width: 959px) and (min-width: 768px){
    #top .container .nine.units {
    width: 458px;
    }
    #top .container .three.units {
    width: 190px;
    }}
    /*there is no sidebar for screensizes below 768px*/

    Thanks,

    Nick

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

The topic ‘Increased Sidebar Width – Not Responsive Now & Text Issue – HELP!’ is closed to new replies.