Support/Ultra Theme/Controlling column width for widgets in in footer

[Resolved] Controlling column width for widgets in in footer

Tagged: 

  • Author
    Posts
  • December 3, 2019 at 4:13 pm #13608

    Andrew Misplon
    Keymaster

    Hi 🙂

    Please, try something like the following and let me know how it goes:

    @media (min-width: 769px) {
	.site-footer .footer-main .widget {
		width: 20% !important;
	}
}

    Adjust the value as required.

    December 3, 2019 at 4:34 pm #13609

    jfcyr
    Participant

    Hello
    It works… but it’s not quite right.
    30% is about right for the English footer, but the French text is longer than the English and still wraps.
    If I increase the value to 40 % French text is ok but now the social media icons move below the image…
    Is there a way to control all the elements of the footer individually, so that the image takes about 40%, the text 40% and the social media 20%?

    December 8, 2019 at 11:07 am #13629

    Andrew Misplon
    Keymaster
    This reply has been marked as private.
    December 8, 2019 at 11:24 am #13631

    Andrew Misplon
    Keymaster

    Sure, we can set the width independently and per language. Please, try the following and adjust as required.

    html:lang(fr-FR) #colophon .widget:nth-of-type(1) {
	width: 25%;
}

html:lang(fr-FR) #colophon .widget:nth-of-type(2) {
	width: 25%;
}

html:lang(fr-FR) #colophon .widget:nth-of-type(3) {
	width: 25%;
}

html:lang(fr-FR) #colophon .widget:nth-of-type(4) {
	width: 25%;
}

html:lang(en-US) #colophon .widget:nth-of-type(1) {
	width: 25%;
}

html:lang(en-US) #colophon .widget:nth-of-type(2) {
	width: 25%;
}

html:lang(en-US) #colophon .widget:nth-of-type(3) {
	width: 25%;
}

html:lang(en-US) #colophon .widget:nth-of-type(4) {
	width: 25%;
}
    December 8, 2019 at 11:25 am #13632

    Andrew Misplon
    Keymaster

    If for example, French has two widgets only then you’d remove:

    html:lang(fr-FR) #colophon .widget:nth-of-type(3) {
	width: 25%;
}

html:lang(fr-FR) #colophon .widget:nth-of-type(4) {
	width: 25%;
}

    As you don’t need to target the third and fourth widget.

    December 9, 2019 at 4:24 pm #13648

    jfcyr
    Participant

    Hello Andrew
    I am using :

    /*largeur des éléments du footer */
    html:lang(fr-FR) #colophon .widget:nth-of-type(1) {
    width: 35%;
    }

    html:lang(fr-FR) #colophon .widget:nth-of-type(2) {
    width: 40%;
    }

    html:lang(fr-FR) #colophon .widget:nth-of-type(3) {
    width: 25%;
    }

    html:lang(en-US) #colophon .widget:nth-of-type(1) {
    width: 35%;
    }

    html:lang(en-US) #colophon .widget:nth-of-type(2) {
    width: 40%;
    }

    html:lang(en-US) #colophon .widget:nth-of-type(3) {
    width: 25%;
    }

    I have removed the code for the 4th footer element in both languages and adjusted the width to what I thought would be suitable, but It does not seem to have any effect on the width of the footer elements. See here on our dev site:

    The Light on Board Company

    December 9, 2019 at 7:59 pm #13650

    Andrew Misplon
    Keymaster

    Thanks for the feedback. It looks like a rule applied elsewhere in Custom CSS is dominating:

    @media (min-width: 769px) {
  .site-footer .footer-main .widget {
    width: 20% !important;
  }
}

    If you remove the above, the new rules targetting each widget should work.

    December 9, 2019 at 8:27 pm #13655

    jfcyr
    Participant

    Hello
    You are correct. But I still cannot have the 3 widgets be on one “line” .
    I have reduced the width of the first two widgets to the point that my text (middle widget, now wraps) but the right widget will not move in line with the others…:
    html:lang(en-US) #colophon .widget:nth-of-type(1) {
    width: 25%;
    }
    html:lang(en-US) #colophon .widget:nth-of-type(2) {
    width: 25%;
    }
    html:lang(en-US) #colophon .widget:nth-of-type(3) {
    width: 50%;
    }
    Widget no 2 has a French variant so in total I have 4 widgets, but with that code i am only controlling 3 widgets. Can that be the problem ?

    December 9, 2019 at 8:32 pm #13656

    Andrew Misplon
    Keymaster

    Could you perhaps show me the dev site without the below rule added to Custom CSS so I can see what’s happening:

    @media (min-width: 769px) {
  .site-footer .footer-main .widget {
    width: 20% !important;
  }
}

    I’m still seeing the above rule added.

    December 9, 2019 at 8:34 pm #13657

    jfcyr
    Participant

    It is already removed.

    December 9, 2019 at 8:35 pm #13658

    jfcyr
    Participant

    I have re-saved the CSS

    December 9, 2019 at 8:36 pm #13659

    Andrew Misplon
    Keymaster

    Is there perhaps caching in place? I still see the rule, even in private browsing mode.

    December 9, 2019 at 8:38 pm #13660

    jfcyr
    Participant

    Not that I know… I have flushed the cache in the backend and in the “Managed WordPress” GoDaddy utility…
    No change

    December 9, 2019 at 8:40 pm #13661

    Andrew Misplon
    Keymaster

    Sorry, there is 2.5% x 2 margin to account for so please, try making your total 95%. Make the third-widget in English 45%.

    December 9, 2019 at 8:46 pm #13662

    jfcyr
    Participant

    GOT IT !
    It seems to work as intended now !
    BTW there is a strange behaviour with the Custom CSS plug-in where you loose the “Save” button and have to click on the Custom CSS text in the left pane to regain it. You would not know anything about that would you ?

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 23 total)
1 2

You must be logged in to reply to this topic.

Scroll to top