[Resolved] Height of last div in right sidebar to match the content column

Home Forums Support Height of last div in right sidebar to match the content column

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #924057
    Anil

    Hi

    Please advice

    how to do height of last div in right sidebar to match the content column in desktop view, so it looks nice….

    Regards.

    #924193
    Anil

    Can we have a flexible height of last div in right sidebar to match the height of main content ?

    #924198
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Try this CSS:

    .site-content {
        display: flex;
    }
    
    .inside-right-sidebar {
        display: flex;
        flex-direction: column;
        height: calc(100% - 40px);
    }
    
    .inside-right-sidebar > aside:last-child {
        flex-grow: 1;
    }
    #924365
    Anil

    Thanks Tom, it worked with media quary:

    @media (min-width: 769px) {
    
        .site-content {
        	display: flex;
    	}
    
    	.inside-right-sidebar {
        	display: flex;
        	flex-direction: column;
        	height: calc(100% - 40px);
    	}
    
    	.inside-right-sidebar > aside:last-child {
    	    flex-grow: 1;
    	}
    
    }
    #924366
    Anil

    Also, can you please advise to have same grid space between footer widget 1 and footer widget 2…

    #924384
    Leo
    Staff
    Customer Support
    #924396
    Anil

    Thanks Leo, it works with slight tweak

    @media (min-width: 769px) {
        #footer-widgets {
            padding: 0;
            background-color: transparent;
        }
    
        .site-footer .footer-widgets-container .inside-footer-widgets {
            margin: 0;
        }
    
        .site-footer .footer-widgets-container .inner-padding {
            padding: 0;
        }
    
        .inside-footer-widgets>div {
            width: calc(50% - 10px);
        }
    
        .inside-footer-widgets>div:first-child {
            margin-right: 10px;
            padding: 20px;
            background-color: #fff;
        }
    
        .inside-footer-widgets>div:last-child {
            margin-left: 10px;
            padding: 20px;
            background-color: #fff;
        }
    }
    
    #924398
    Anil

    Also can you please advise to have grid space between footer widget 1 and footer widget 2 when width is less than 769 because at width 768 footer widgets re-aligned in a column….

    #924410
    Leo
    Staff
    Customer Support

    Have you figured it out?

    I see a space between them:
    https://www.screencast.com/t/yAGgvuifB4cF

    #924416
    Anil

    Yes Leo, it is working now with following css:

    @media (max-width: 768px) {
        #footer-widgets {
            padding: 0;
            background-color: transparent;
        }
    
        .site-footer .footer-widgets-container .inside-footer-widgets {
            margin: 0;
        }
    
        .site-footer .footer-widgets-container .inner-padding {
            padding: 0;
        }
    
        .inside-footer-widgets>div:first-child {
            margin-bottom: 10px;
            padding: 20px;
            background-color: #fff;
        }
    
        .inside-footer-widgets>div:last-child {
            padding: 20px;
            background-color: #fff;
        }
    }
    
    @media (min-width: 769px) {
        #footer-widgets {
            padding: 0;
            background-color: transparent;
        }
    
        .site-footer .footer-widgets-container .inside-footer-widgets {
            margin: 0;
        }
    
        .site-footer .footer-widgets-container .inner-padding {
            padding: 0;
        }
    
        .inside-footer-widgets>div {
            width: calc(50% - 5px);
        }
    
        .inside-footer-widgets>div:first-child {
            margin-right: 5px;
            padding: 20px;
            background-color: #fff;
        }
    
        .inside-footer-widgets>div:last-child {
            margin-left: 5px;
            padding: 20px;
            background-color: #fff;
        }
    }
    

    Only issue remaining is footer widget height…. i think display:flex is creating it ….

    Can you suggest some tweak….

    #924420
    Anil

    I checked that following css is to be tweaked:

    @media (min-width: 769px) {
        #footer-widgets {
            padding: 0;
            background-color: transparent;
        }
    
        .site-footer .footer-widgets-container .inside-footer-widgets {
            margin: 0;
        }
    
        .site-footer .footer-widgets-container .inner-padding {
            padding: 0;
        }
    
        .inside-footer-widgets>div {
            width: calc(50% - 5px);
        }
    
        .inside-footer-widgets>div:first-child {
            margin-right: 5px;
            padding: 20px;
            background-color: #fff;
        }
    
        .inside-footer-widgets>div:last-child {
            margin-left: 5px;
            padding: 20px;
            background-color: #fff;
        }
    }
    #924697
    David
    Staff
    Customer Support

    Hi there,

    by making the footer container a flex should resolve that – something like this:

    .inside-footer-widgets {
        display: flex;
    }

    You will need to include within your media queries for desktop only.

    #924947
    Anil

    Thanks David, it worked.

    My observation: “Tom and David are experts in css”

    Regards & Bye.

    #924959
    David
    Staff
    Customer Support

    Glad we could be of help.

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.