Site logo

Archived topic

left-sidebar not showing

7 replies · Started by iamarghya on July 6, 2022

Viewing posts 1–8 of 8

The left sidebar is not showing in iPad mini or below resolution though I think I didn't add any media query for that can you check for me?

Hi Iamarghya,

You have this code which is has the right sidebar set to display none on tablet and mobile:

@media (max-width: 1024px){
	.blog .is-left-sidebar {
		width:33%
}
		.blog .is-right-sidebar {
		display:none;
}
	.blog .site-content .content-area {
    width: 67%;
}
}

This media query has one too:

@media (max-width: 480px){
.archive.category .site-content .content-area {
    width: 100%;
}
	.archive.category .is-left-sidebar{
		display:none;
	}
	.archive.category .is-right-sidebar {
    display: none;
}
		.blog .is-right-sidebar {
    display: none;
}
	.archive.category  .site-content {
    margin: 0px 0px 0px 0px;
}
}

Hope this clarifies!

yeah, that's right but I am talking about the left sidebar. The below code is for mobile devices and after that, I set the left sidebar to 33% but it is not showing on 768px after that it is showing that so what changes do I need to make to that CSS?

I see. This is the only media query that’s hiding the left sidebar at some point:

@media (max-width: 480px){
	.blog .site-content .content-area {
    width: 100%;
}
	.blog .is-left-sidebar{
		display:none;
	}
	.gb-grid-wrapper > .gb-grid-column-42e481e1 > .gb-container {
    justify-content: center;
    margin-left: 0px;
}
	.gb-container-93d2d89c {
    margin-bottom: -10px;
}
	.gb-container-93d2d89c > .gb-inside-container{
	margin:15px;
}
	.gb-container-93d2d89c > .gb-inside-container{
	background:#ffffff;
		 box-shadow: 0px 0px 20px -7px rgb(31 38 135 / 20%);
	border-radius:10px;
	border: 1px solid #dfdfdf;
}
h2.gb-headline-81f071a6{
	font-size:17px;
	font-weight:600;
	margin-bottom:-1px;
}.gb-headline.gb-headline-26562dd3.gb-headline-text{
	font-size:11px;
	}
	.gb-button-47e2eeba .gb-icon {
    font-size: 1.2em;
		color:white;
}
	span.gb-button.gb-button-5f8ae8d4, span.gb-button.gb-button-b2f5f3ac{
		display:none;
	}
	span.gb-button.gb-button-3d2cbfdc, span.gb-button.gb-button-e89f294b{
	display:inline;
}
}

Specifically:

.blog .is-left-sidebar{
		display:none;
	}

It should appear on other views. It appears screens larger than 480px on my end.

Hope this clarifies!

oh but mine is not showing on all article pages...Below or smaller than 768px it is not side-by-side it is showing after all the posts...At the end or below of the post I want to show them side-by-side like a column that's why I set those widths. I tried reconfiguring it but nothing seemed to work.

I see. Thank you for clarifying. Try adding adding this CSS:

@media (max-width: 768px) {
    div#content {
        flex-direction: row-reverse;
    }
}

Hope this helps!

Oh...that's my fault. Extremely sorry, I couldn't clearly explain to you. But the code worked and thanks a lot.❤❤❤❤❤❤❤

No worries! You’re welcome Iamarghya!

This archived topic is closed to new replies.