main div width and spacing to sidebar

  • Hi!

    I’m using a child theme of the Themefoundry’s Make.

    What I’m struggling with – on computer screen-width – is the spacing between the main id=”site-main” and the section id=”sidebar-right”, as illustrated in the blog index here: https://cluetail.com/en/blog/

    I would like the site main to be stretched a bit further to the right, while staying e.g. 20px short of touching the sidebar.

    What would be the best way to achieve this, without messing up the layout on smaller screens?

    Cheers,
    Jos

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

  • Hi

    Simply add below CSS code to increase width for site-main content.

    .has-right-sidebar .site-main, .has-left-sidebar .site-main{
    width: 72%;
}

    Thanks

    Thread Starter Schuurmudgeon

    (@schuurmudgeon)

    Thank you codemovement.pk, I tried that. Problem is, when you then make your browser window smaller, and when the sidebar moves under the site-main, the site-main’s width appears to stay at 72% of the screen width rather than filling it. Therefore, in terms of mobile-responsiveness, it seems less than ideal.

    Cheers,
    Jos

    Thread Starter Schuurmudgeon

    (@schuurmudgeon)

    I added this CSS now:

    @media screen and (min-width: 765px) {
	.has-right-sidebar .site-main, .has-left-sidebar .site-main {
		width: 72%;
	}
}

    Although I’m not sure if 765px is the exact breaking point…

    / Jos

    Hi @schuurmudgeon

    Exact break point is 799px so try to add below css code to make it full width on smaller devices.

    @media ( max-width: 799px ) {
    has-right-sidebar .site-main, .has-left-sidebar .site-main{{
	width:100%;
    }
}
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘main div width and spacing to sidebar’ is closed to new replies.