[Resolved] Footer widgets

[Patrik]

Hi,

1) How can i easly match the width of footer widgets to my “container” frame.
As i use “inspect element” i think its the width of: <main id=”main” class=”site-main”>

Problem now is that is catching width all the way to side widget, thats not how o would like it 🙂

2) In the theme i have option for 3 Footer widgets.
Is it possible to have 2 footer widget sharing the space and not 3?

Im going to have 2 banners down in the footer area, width 336px X height 280px
Since my website has an “inner frame” of 860px width i can fit 2 banners with some space between them.
Or in the future change the width etc.

What happens now?
If i add banner slider in Footer widget 1 and 3, they arrange as Footer widget 1 and 2.
So is it possible to use the space 1,2 and 3 but only for 2 widgets?

From plugin developer:
“Similarly, your theme has defined each of the three footer widgets to take up 33.3% of the space, which comes out to 313px for each container. MetaSlider, if set to 100% width, will just fill the area”

Check the Start page in the bottom

[David]

Hi there,

try adding this CSS:

@media (min-width: 769px) {
    .site-footer .footer-widgets-container .inside-footer-widgets {
        display: flex;
    }
}

[Patrik]

Hi David,
Many thanks!

Seems to be working, seems kind off “wrong” but it may me the layout.
The footer is wider than the content area as you can see on the website.
So the problem is that it has “full” width and should only “follow” width of content site “excluding the right menu”

I had the same problem with right menu but under Layout > Sidebars
I can resize the menu, this allowed me to actually fit full image sizes correct.
The images in the bottom footer is actually 300px x 600px but are controlled of the footer widget limited size (height)

Many thanks,
Patrik

[David]

Is this resolved ? Or is there something else that needs to happen – let us know 🙂

[Patrik]

Hi David,
The problem is still there because the width of the footer is wider then “content” area.
You can see it on “start” page on my website.

Also the “size” of the footer is limiting the size of the content showing.

Many thanks,
Patrik

[David]

Would you be able to provide a mockup image of how you want the footer widgets laid out ? then i can take a look at some other CSS

[Patrik]

Hi David,
Of course!

1) This is the first thing with the footer beeing to wide:
Its a .PNG file i made in paint with printscreen placed in my dropbox:
Dropbox Footer to wide

2) This is the second thing with footer widget “limiting” size of my image
I would restrict the width to the footer (that i want to do in step 1) as the same size as content frame.
If i inspect the <main id=”main” class=”site-main”> it has a width of 860px.
So i the footer would have 2 widgets with 430 width each it would give me space to adjust images at the bottom to a maximal width of 430px but not in height.
Its a .PNG file i made in paint with printscreen placed in my dropbox:
Dropbox Footer minimizing images

Many thanks,
Patrik

[David]

Try this CSS to contain the width of the Footers:

@media (min-width: 768px) {
    .footer-widgets {
        max-width: calc( 80% - 20px );
    }
}

Then in Customizer > Layout > Footer – change Footer Widgets to 2. Then they will fill the space available.

[Author]

Posts