Image widget container margin

  • Resolved durocketuk

    (@durocketuk)


    6 years, 5 months ago

    Hi all,

    I use Site Origin Page Builder to lay out a pannel of pictures/text widgets.

    I would like to decrease the margin around my Site Origin Image widgets, but I can not understand their behaviour. It seems the image container is taking up some space beyond the image actually displayed, but I can’t isolate the class and the css rules responsible for this.

    The section is : https://menartwork.fr/#collection

    I declared my Image widgets with class collection-img and tried the obvious, to no avail :

    .collection-img {
	margin: 0;
}

    Many thanks in advance for the help.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Support Andrew Misplon

    (@misplon)

    Hi ??

    Please, try adding the following to your child theme CSS or Customize > Additional CSS and see if that helps:

    .so-widget-sow-image {
	font-size: 0;
}
    Thread Starter durocketuk

    (@durocketuk)

    Hello,

    Thank you for answer !

    It works, but isn’t this kind of a hack ? I have the widget title displayed over the image on hover, and obviously setting font-size of the parent element to 0 hides it.

    Actually I don’t understand why displaying the title causes this margin around the widget.

    Plugin Support Andrew Misplon

    (@misplon)

    Hi, sorry I missed the text. Unfortunately, we don’t have much time to assist with custom development but do our best to help when able.

    Try removing the rule I sent previously. Then add:

    .so-widget-sow-image {
	position: relative;
}

    Finally, locate this rule: .collection-img .so-widget-sow-image .widget-title and change it from position: relative to position: absolute.

    Thread Starter durocketuk

    (@durocketuk)

    Andrew,

    Fantastic, it works !

    Could you please give a hint into what happens ?

    I had to set the position of the image title to relative because I use a css trick to overlay the image title over the image on mouse hover :

    .collection-img .so-widget-sow-image .widget-title {
	position: relative;
	transform: translateY(-300px);

    If position is set to absolute, then the title spanned the whole page.

    Now setting the parent div position to relative solve the problem, but I admit I have no clue why…

    Many thanks for your help !!

    • This reply was modified 6 years, 5 months ago by durocketuk.
    Plugin Support Andrew Misplon

    (@misplon)

    Super, glad that helped. By making the parent container relative and the child absolute we’re positioning the child absolutely within the parent. So top: 0, for example, will be top of the container we just set to relative. We’re basically setting the boundaries for the absolute element to use. I’m sure there are much better explanations of this elsewhere. Perhaps that gives you a starting point ??

    Thread Starter durocketuk

    (@durocketuk)

    It does, thank you for the support !

    Plugin Support Andrew Misplon

    (@misplon)

    For sure ?? All the best.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Image widget container margin’ is closed to new replies.

Tags