Wordpress and flex conflict

HTML & CSS
1

Initially, I was thinking that I should get rid of this class=“widget-item” because this is creating extra margin/padding. Please see the image.enter image description here

I want to get rid of this class, but not div as it might rupture the design.

Now I think that the problem is something else. widget-item doesn’t have the flex property. even If I insert the display: FLEX property then it behaves like this →
https://www.screencast.com/t/ayYb53xT

May be because we implemented this →/*Wordpress CSS*/ .site-footer .widget-item { flex: 1 0 50% } to fix the menu widget is also conflicting?

Live Link where this is happening could be seen here.

2

Hi,

You have the items set to flex:1 0 50% so they take up at least 50%. You could set a specific width on the subscribe box as you don’t have that fluid and then resize the other items.

e.g.

.site-footer .widget-item:nth-child(1){flex:1 0 370px}
.site-footer .widget-item:nth-child(2){flex:1 0 calc(100% - 420px)}
.site-footer .widget-item:nth-child(3){flex:1 0 100%}
@media screen and (max-width:710px){
.site-container .site-footer .widget-item{flex:1 0 100%}
}

The structure of the footer is a little odd as you only wanted two items in a row but you apply flex to three items which is why you are getting the extra spacing because 50% was used to split the first two items and the third item then fills the whole row.

1 Like
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.