Fix widget position in WordPress

[harry_ord]

This is my site:

http://hojalateriaelguante.agencialosnavegantes.cl/

In the footer section i have 4 social network icons with a hover effect. For that effect, i borrowed code from an overlay example in w3schools:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade

It looks fine on my desktop screen, but, if i shrink the browser window, all the icons float to the right of the dog's picture, and i can't understand why this does happen.

How can i fix them? i want them to stay down, below the dog picture.

 

[dsonesuk]

The image is in a floated div container that is the same size, this container div is in a responsive div that expands in width to around 50%. Because the image and it container are smaller, a gap is produced, and the floated icons attempt to fill it.

You have to make the image container div none floated, it will fill the width available to it, forcing the icons to remain below it.

[harry_ord]

I added this to the css

 .contenedor {
  position: relative;
  width: 100%;
  float: none;
 
}

Doesn't fix anything.

[dsonesuk]

YOU are targeting the wrong element, you need to target the larger image container NOT social network containers, you need the larger img container to fill the whole width, preventing gap therefore prevent SN icons sliding up into that gap! The selector must be more specific to target that specific footer element as simply using '.contenedor' will target ALL elements using this class, which you don't want!

[harry_ord]

I was using the image element for the widget, now i deleted and put a "text" element with the following html:

 

<img src="http://HojalateriaElGuante.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-1_chico.png" style="float:none;">

Still doesn't work

[dsonesuk]

IMAGE CONTAINER, the element that surrounds the img element

[harry_ord]

This doesn't do anything:

 

.textwidget {
  float: none;
}

And this pushes down the icons but also makes them giant:

 

#footer-widgets .footer-widget .fwidget {
  float: none;
}

 

[dsonesuk]

IT seems you have gained a few elements now?

You again! are targeting multiple identical classes.

(1) .footer-widget are the floated containers that bunch together social network icons, links, services, contact, whose width will go from 25% to 100% width depending on device width. DO NOT TOUCH.

(2) .fwidget.et_pb_widget.widget_text is floated, it will collapse width wise to content I.E the image, all the other element outside the img element, whether floated or not will collapse to this element ('.fwidget.et_pb_widget.widget_text');

This floated element (.fwidget.et_pb_widget.widget_text) has sibling social network icons container elements, because this element shrinks down to image width, it becomes smaller than (1) allowing its sibling SN icons (being floated) to occupy the space next to it to fill the gap.

Making this element (.fwidget.et_pb_widget.widget_text) none floated will cause to fill entire width available to it to make it same width as (1), no more gaps, no more gappy, no more icon going up to fill gap as it no longer exists.

Now you have to target a specific .fwidget.et_pb_widget.widget_text as there are 4, NOW id reference are unique within a page, you should never have multiple identical id reference. this element has a id of 'text-9' so use '#text-9.fwidget.et_pb_widget.widget_text' to target that specific element you wish to apply float none to.

[harry_ord]

#text-9.fwidget.et_pb_widget.widget_text {
  float: none;
}

Now is working! thanks a lot! How come you were able to see this? i tried to fix it myslef with the inspect element option on Chrome, but i wasn't able to see the problem at all.

[dsonesuk]

I just inspected the sn icons, noticed that larger image sibling container was also floated left, therefore they will do what they are supposed to do and  bunch together,  if space is available.

So you have to make that space unavailable, by removing float, and because it is a div block element, it will do what all block element will do fill the space available to it from the outer parent element.

What you can do in firebug from Firefox, and I presume in Chrome is select the element in question, right click in css panel, select add rule, and it will add a selector that will refer to that specific element id/classes, then you add whatever property you want as a test (float: none;) so you can do live edit and see a instant result. When you have the result you want, you can just copy the selector and properties into the css file.