- This topic has 15 replies, 4 voices, and was last updated 4 years, 4 months ago by David.
-
AuthorPosts
-
September 8, 2018 at 1:51 am #671710Callum Staley
Hi,
I am wondering can you tell me how to make sure my sidebar (left) is always the same height as the website content.Thanks Callum
September 8, 2018 at 9:12 am #671967TomLead DeveloperLead DeveloperHi there,
Looks like you marked this as resolved – I assume you got it working?
Let me know 🙂
September 8, 2018 at 9:49 am #671982Callum StaleySorry I didn’t mean to mark it as resolved as I haven’t found a solution yet
Any help would be appreciated
September 8, 2018 at 7:50 pm #672237TomLead DeveloperLead DeveloperAny chance you can link me to your site? I’ll be able to give you some CSS 🙂
September 9, 2018 at 2:22 am #672350Callum StaleyThank you, the website is currently offline/coming soon page but if you visit the following ,ink you should get access to it. http://www.viking.co.im?bypass=test
You will see in the css that I have added a media query that makes the sidebar goto the top of the page, overlapping the header.
@media (min-width: 769px) {
.one-container .inside-left-sidebar {
margin-top: -200px
}
}Thanks Callum
September 9, 2018 at 11:27 am #672688TomLead DeveloperLead DeveloperWhat if you do this instead?:
@media (min-width: 769px) { #left-sidebar { margin-top: -200px; height: calc(100vh + 200px); background: #656565; } }
September 9, 2018 at 11:53 am #672694Callum StaleyUnfortunately that doesn’t work. It add’s a little to the bottom of the sidebar but not enough
September 9, 2018 at 8:11 pm #672875TomLead DeveloperLead DeveloperCan we try this?: https://generatepress.com/forums/topic/full-height-sidebar-next-to-menu/#post-672688
It’s actually full height on my Macbook, so if that doesn’t work I’ll have to check on my 4k screen in the office tomorrow morning.
September 10, 2018 at 3:57 am #673074Callum StaleyGood Morning Tom,
The original media query that you posted without the 200px is actually now working, it must have been cached on my laptop.However unfortunately it is making the sidebar too big. It is adding a lot of space below the content but above the footer. It won’t work by using the -200px as the sidebar will need to be different sizes on different pages depending on the amount of content
Are you also able to tell me is it possible to change the sidebar image in the css so that I can change the image based on the screen size using a media query rather than just having one image the whole time?
September 10, 2018 at 3:14 pm #673784TomLead DeveloperLead DeveloperYou can make sure the site footer loads on top of the sidebar with this CSS:
.site-footer { z-index: 20; position: relative; }
I’m not seeing a lot of extra space anywhere?
Which image exactly? The one in the first widget?
September 11, 2018 at 4:28 am #674194Callum StaleyThat’s great thank you. Yes I would like to be bale to change the widget image and also the background image of the sidebar using css.
September 11, 2018 at 9:13 am #674506TomLead DeveloperLead DeveloperA background image can be changed within a media query:
@media (max-width: 768px) { .sidebar .widget { background-image: url(yoururl.com); } }
A static image can’t. You’d need to add multiple static images and hide them based on media queries.
September 12, 2019 at 1:41 am #1007399RodrigoHi Tom,
Could I use this CSS snippet for custom background images? I want to add a background images in specific pages.
body.page-id-123 { background-image: url("image_url"); background-position: left top; background-size: auto; background-repeat: no-repeat; background-attachment: fixed; }
September 12, 2019 at 3:50 am #1007492DavidStaffCustomer SupportHi there,
yes, i made a quick edit to your CSS – to include the closing
}
and added the body tag to the class, which just makes it a bit more readable and little more specific.November 2, 2019 at 12:28 am #1051085RodrigoHello,
I’ve struggling trying to do this sidebar height right, with no results. The solution you provide here:
#left-sidebar { height: calc(100vh + 200px); }
it works for one page, but not for another. I need to implement full height sidebar in all internal pages, and it has to be the same size of content.
Is there a way I could specify the height of sidebar 100% relative to the height of content?
Here’s an image of how it looks the website today: https://imgur.com/SdLg0Ke
-
AuthorPosts
- You must be logged in to reply to this topic.