Home Forums Pro Themes Charitize Pro Setting the Width of Footer Widgets Content

This topic contains 12 replies, has 2 voices, and was last updated by  wensolutions 1 month ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #83432

    ashish.mool
    Participant

    Hello,

    I would like to set the width of my footer area where the widgets are displayed to 80%. There are currently 3 sections of the footer. Any help would be highly appreciated. Thank you!

    #83662

    wensolutions
    Keymaster

    Hello @ashish-mool,

    Actually, we are not quite clear with your query but if you want your ever footer widget to occupy 80% as provided in the screenshot below add CSS mentioned below:

    Screenshot:
    https://prnt.sc/lel22u

    CSS to add:

    .footer-widget .row {
    	display: flex;
    	flex-wrap: wrap;
    }
    .footer-widget .contact-list {
    	max-width: 100%;
    	width: 80%;
    	margin: 0 auto;
    }

    If this is not what you want then please clearly express the idea with the proper screenshot so that we can help you further.

    Thank you.

    Regards!!

    #83668

    ashish.mool
    Participant

    Sorry I couldn’t make it more clear on the previous comment. I have attached the screenshot for your reference:

    http://foodforlife.org.np/wp-content/uploads/2018/11/Screenshot-Widgets.jpg

    I want to make the 3 footer widget areas to fit in the 80% width that has been set for the layout of the content right above it. So can each footer width be set so that its parallel to the layout of the content width above? The content width has been set to 80%.

    Hope you understood the problem. Thanks!

    #83669

    ashish.mool
    Participant

    Sorry the more precise layout that I am looking for would be this:

    http://foodforlife.org.np/wp-content/uploads/2018/11/Screenshot-Correction.jpg

    #84010

    wensolutions
    Keymaster

    Hello @ashish-mool,

    Please remove the CSS code that we have provided yesterday and replace it with the code given below:

    .footer-widget .contact-inner > .row {
    	display: block;
    	margin: 0;
    }
    
    .footer-widget .contact-inner > .row > .col-md-12 {
    	padding: 0;
    }
    
    .footer-widget .contact-inner > .row {
    	display: flex;
    	flex-wrap: wrap;
    	max-width: 100%;
    }

    Hope this helps.

    Regards!!

    #84014

    ashish.mool
    Participant

    Hello and Namaste!

    I have deleted the code that you had provided to me earlier and applied this code which you have given me recently. However, I couldn’t get the desired result. I wanted to increase the width of the footer widget areas so that it aligns with the width of the body and right sidebar above. thank you!

    #84025

    wensolutions
    Keymaster

    Hello @ashish-mool,

    Once try by replacing above CSS with the CSS given below.

    .footer-widget .contact-inner > .row {
    	display: block;
    	margin: 0;
    }
    
    .footer-widget .contact-inner > .row > .col-md-12 {
    	padding: 0;
    }
    
    .footer-widget .contact-inner > .row > .col-md-12 > .row {
    	display: flex;
    	flex-wrap: wrap;
    	max-width: 100%;
    }

    Hope this helps.

    Regards!!

    #84038

    ashish.mool
    Participant

    I just did. But it doesn’t make any changes even if I add/remove the CSS…

    #84039

    wensolutions
    Keymaster

    Hello @ashish-mool,

    When we checked we found that the CSS is working fine as you can see in the screenshot below:

    https://prnt.sc/lew4t1

    Footer widget is perfectly aligned with the width of the content.

    Regards!!

    #84051

    ashish.mool
    Participant

    I am currently viewing on 1920px x 1080px screen. Just in case, I have cleared the history and all the cache of the browser as well. I can see that it looks perfect in the screenshot you have sent to me. Why isn’t it working on my screen? Is it something with the resolution?

    Current Screenshot:

    http://foodforlife.org.np/wp-content/uploads/2018/11/Screenshot-FooterWidgets.jpg

    #84076

    wensolutions
    Keymaster

    Hello @ashish-mool,

    Please try this code replacing all other codes that is provided before.

    @media screen and (min-width: 1440px) {
      .footer-widget > .container {
        max-width: 80%;
        padding: 0;
      }
      .footer-widget .contact-inner > .row {
        margin: 0 -15px;
      }
      .footer-widget .contact-inner > .row > .col-md-12 {
        padding: 0;
      }
      .footer-widget .contact-inner > .row > .col-md-12 > .row {
        margin: 0;
      }
    }

    Thanks

    #84093

    ashish.mool
    Participant

    It worked…Now it looks amazing. Perfect! Thank you!

    #84326

    wensolutions
    Keymaster

    Hello,

    Glad we could help you.

    Let us know if there is anything further.

    Thank you.

    Regards!!

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

You must be logged in to reply to this topic.