[Support request] [Footer issues] Stacked widget order on mobile is not customizable

[Mike8050]

So I try to ditch Elementor and rebuilding the site with GP. Unfortunetly a lot of manually editing as many option don’t exist like with other themes. This first issue for instance. I got two rows in the footer (top/bottom). On desktop its now replicated. Switching to mobile the order is mixed up. Fighting with code here.
On desktop On mobile (vertical)
456 132436
123

1. How can the top widgets stay together on the top of the mobile footer? (referenz live site)

2. The social/contact icons in the footer bar (site-info) jump ouside the body container on mobile. Can’t seem to fix this as either desktop or mobile gets destroyed.

2. How can I achive this seperator with the widget style footer layout logic in GP using svg?(referenz live site)

3. How to add a marque news text over the hole footer in full width between the top und bottom widget like on the production site?

[Elvin]

Hi there,

For #1: Try adding this CSS:

html, body {
    overflow-x: hidden;
}

For #2:

You have this CSS on your site:

.icon-footer-bar svg {
    height: 30px;
    fill: #def2f1;
    margin: 0;
}

You may have to define the width as well.

Example:

.icon-footer-bar svg {
    width: 30px;
    height: 30px;
    fill: #def2f1;
    margin: 0;
}

But If I may recommend, you may want to consider using GenerateBlock’s button blocks to create your social icon layout.

As for the overall layout (For 3 and 4), this may be a good opportunity to make sure of Block Element – Site Footer to completely replace the footer with your own custom footer layout.

This is so you can manually customize the general layout with GenerateBlocks’ Grid block and Container Block and then add your marquee and separator with Gutenberg block elements.

[Mike8050]

Hi thanks for your response

For #1: Try adding this CSS:

html, body {
    overflow-x: hidden;
}

This doesn’t do anything. Again I would like to retain the order from the desktop layout to mobile. This is actually a no brainer from my experience with other themes. This realted that GP uses this “aside” an not divs?

For #2:

You have this CSS on your site:

.icon-footer-bar svg {
    height: 30px;
    fill: #def2f1;
    margin: 0;
}

You may have to define the width as well.

Example:

.icon-footer-bar svg {
    width: 30px;
    height: 30px;
    fill: #def2f1;
    margin: 0;
}

They now clip into the language switcher in mobile and the spacing of the icons is wrong now on desktop.

As for the overall layout (For 3 and 4), this may be a good opportunity to make sure of Block Element – Site Footer to completely replace the footer with your own custom footer layout.

I guess then I need to start all over again? Puh. You refering to the Elements addon where one can define/merge header? Don’t know to what you refering to with “Block Element – Site Footer”.

[Mike8050]

Ok so I figured it about the Site Footer Block Element. Unfortunetly its not working as advertised. I just set one up as “Site Footer” element located on the hole page. But it acutally just replaces the footer bar not the hole footer which includes the widgets.
Also social icons are not showing up even though they are visible and setup in the editor. Something fishy with this feature I must say even though the idea is great. what could be the issue here or is it on purpose that it just replaces the footer bar and not the hole footer?

[Elvin]

This doesn’t do anything. Again I would like to retain the order from the desktop layout to mobile. This is actually a no brainer from my experience with other themes. This realted that GP uses this “aside” an not divs?

ah yes sorry that CSS was for the overflow of social icons. But there’s no need for this anymore as it should’ve been sorted by For #2 CSS if you kept it. You can disregard it if you’re pushing through with Site footer.

I guess then I need to start all over again? Puh.

That’s going to be the case, unfortunately.

…You refering to the Elements addon where one can define/merge header? Don’t know to what you refering to with “Block Element – Site Footer”.

The default widget layout for Footer widgets 1-5 + Footer bar isn’t flexible. I think that’s actually why your reference site is using Elementor.

The reference site’s footer is built with 1 container having 4 elementor sections + 1 more section on the bottom bar.

the 1st container having the following sections:

1st section = 4 columns w/ icons
2nd section = marquee
3rd section = separator
4th section = another 4 columns.

And the bottom bar being its own section containing 3 columns.

The idea behind my suggestion of using the Block Element – Site Footer is to keep the Footer widgets area empty and then copy this Container + column arrangement using GenerateBlocks’ Container block and Grid Block through the Block editor.

The idea is basically:

1st section = a GB Container block containing 1 GB Grid Block set to 4 columns.
2nd section = another GB Container Block containing only the marquee and the separator below it
3rd section = a GB Container block containing 1 GB Grid Block set to 4 columns.
4th section = the green bottom bar.

Ok so I figured it about the Site Footer Block Element. Unfortunetly its not working as advertised. I just set one up as “Site Footer” element located on the hole page. But it acutally just replaces the footer bar not the hole footer which includes the widgets.

That’s right. It only replaces the Footer bar. Users are allowed to keep the site info area (copyright) and Footer widget areas 1-5 on Appearance > Customize > Layout > Footer but we suggest settings the # of footer widgets to 0 and/or keeping it empty if the preference is having everything within the Block Element – Site Footer.

This is subject to change if more users wish for any change w/ how it currently functions. (It’s fairly new. It’s the latest addition to GP Premium. 😀 )

Also social icons are not showing up even though they are visible and setup in the editor. Something fishy with this feature I must say even though the idea is great. what could be the issue here or is it on purpose that it just replaces the footer bar and not the hole footer?

Can you provide temporary backend access to the staging site? So we can check the Block Element – Site footer in question as to why the social icons aren’t showing up.

You can use the private information text field to provide the details. 😀

[Mike8050]

First of all. I heard about it but now seeing it myself. You guys make a great sustainable support here. Very lovley. Thanks for that!

So I’m getting there step by step. Unfortunetly to much menu clicking workflow to my liking but I’m not giving up yet.

Can you provide temporary backend access to the staging site? So we can check the Block Element – Site footer in question as to why the social icons aren’t showing up.

Like you suggested, I tried the button block and added the svg links in there. Seems to work. Never would have come to the idea that button block can be used as icon list.

That’s right. It only replaces the Footer bar. Users are allowed to keep the site info area (copyright) and Footer widget areas 1-5 on Appearance > Customize > Layout > Footer but we suggest settings the # of footer widgets to 0 and/or keeping it empty if the preference is having everything within the Block Element – Site Footer.

This is subject to change if more users wish for any change w/ how it currently functions. (It’s fairly new. It’s the latest addition to GP Premium. 😀 )

Yeah that behaviour isn’t inuitive as the element is called site footer. I will do this the next step and use the grid layout to replicate the production footer. I’m starting to get to know the quirks and bits now in the Gutenberg UX. But there is on important thing.

One not really footer related but more related to the Elements feature. For some reason a lot of widget not showing up in the block libary. The Polylang language switcher for instance was missing and I had to install “amr shortcode” to get it as a shortcode.

Are some widget missing in the Element editor mode because they aren’t compatible?

How to add the navigation menus sitemap / information in the Element feature editor mode since they are not selectable?

Now having the switcher as a shortcode I can’t for a reason customize the font color and I’m not sure why. “!important” isn’t working.

[Elvin]

One not really footer related but more related to the Elements feature. For some reason a lot of widget not showing up in the block libary. The Polylang language switcher for instance was missing and I had to install “amr shortcode” to get it as a shortcode.

Are some widget missing in the Element editor mode because they aren’t compatible?

It’s likely because Polylang hasn’t caught up with Gutenberg implementations yet. WordPress is really pushing the Gutenberg editor that it even changed how Appearance > Widgets work on version 5.8 but some plugins have yet to follow through. 😀

But yeah that’s a good approach. Here’s actually one that doesn’t require plugins – https://gist.github.com/nicomollet/47ba9808f3187c9f1568d8f7c4355b54

How to add the navigation menus sitemap / information in the Element feature editor mode since they are not selectable?

With third party plugins that adds navigation menu as a gutenberg block,

or

by custom shortcode.

Here’s an example – https://generatepress.com/forums/topic/navigation-menu-in-block/#post-1643680

Now having the switcher as a shortcode I can’t for a reason customize the font color and I’m not sure why. “!important” isn’t working.

Perhaps the selectors are wrong. Can you specify which part are you styling?

If it’s the text of the polylang, you can do it with this w/o the use of !important:

aside#polylang-6 .lang-item span {
    font-weight: 600;
    color: white;
}

[Mike8050]

Uff, thats a lot hacking around for a simple thing like sitemap links. Its seems like this an emergency solution. I have the php hook running and the shortcode running but the links/typo are invisible. Just on hovering one sees the links. Its not the font color but somehow they are hidden. Any idea what the issue is?

Generally speaking. I see I need to css style every element when using the Elements feature. Colors, forms and buttons are wrong and not using the themes default values I already set in place. This is a lot of extra work where the themes default values should take over this task. Anyway to force it to use the main stylesheet?

aside#polylang-6 .lang-item span {
    font-weight: 600;
    color: white;
}

Yes thanks. I just used .lang-item selector and that did not do the trick.

[Elvin]

Uff, thats a lot hacking around for a simple thing like sitemap links. Its seems like this an emergency solution.

Yeah PHP snippets are workarounds. Navigation menu blocks would be good. (Gutenberg had one but they removed it.) Plugins would be the simplest approach for site builders that prefers to move away from PHP.

I have the php hook running and the shortcode running but the links/typo are invisible. Just on hovering one sees the links. Its not the font color but somehow they are hidden. Any idea what the issue is?

It’s inheriting the link color set on customizer which incidentally is the same as the background color so it blended in.

I’d suggest setting the text color on the column container block that contains the shortcode. The shortcode’s text should inherit its colors. 😀

Alternatively, you can set it with CSS using this:

ul.portable-nav-menu.menu.sf-menu a {
    color: white;
}

ul.portable-nav-menu.menu.sf-menu a:hover {
    color: blue;
}

Generally speaking. I see I need to css style every element when using the Elements feature. Colors, forms and buttons are wrong and not using the themes default values I already set in place. This is a lot of extra work where the themes default values should take over this task. Anyway to force it to use the main stylesheet?

main.min.css (flexbox) or all.min.css (floats) should already be in use on the front-end if a block on an element isn’t styled by a plugin or a custom CSS.

But do note that the theme tries to steer clear of WordPress’ default styling for its core blocks which is /wp-includes/css/dist/block-library/style.min.css in consideration to users who use the core blocks default and migrated from another theme to GeneratePress.

As for your site specifically: If you’re pertaining to this – https://share.getcloudapp.com/4guPxpBL – it’s being styled by the plugin. It’s using CSS coming from /wp-content/plugins/newsletter/style.css but its heading style is inherited from its direct parent which has inline styling.

[Mike8050]

Thanks for your detailed response. That helped on some points.

Do you have an idea how to migrate the seprator (the svg in the footer) of the live site into the GP element footer? I did try to replicate it but other then having it visible, I did not get further. I could not repeat it the x axis to the full width. I found an user here asking the same question regarding such seprators from elementor long ago and he got it working it but did not explained how he did it.

But do note that the theme tries to steer clear of WordPress’ default styling for its core blocks which is /wp-includes/css/dist/block-library/style.min.css in consideration to users who use the core blocks default and migrated from another theme to GeneratePress.

As for your site specifically: If you’re pertaining to this – https://share.getcloudapp.com/4guPxpBL – it’s being styled by the plugin. It’s using CSS coming from /wp-content/plugins/newsletter/style.css but its heading style is inherited from its direct parent which has inline styling.

This was referring to the general experience. For instance the newsletter plugin I needed to add this as a widget in elementor but its styling was inherited from OceanWp. Also the sitemap links that I added with the shortcode widget plugin. My impression is that the basic styling (color, font..) what I set in the customizer is being ignored and a lot of unnessarry customizsation needs to be done.

[Elvin]

Do you have an idea how to migrate the seprator (the svg in the footer) of the live site into the GP element footer?

It’s made in Elementor so we can’t simply copy and paste it to the staging site because Elementor has its exclusive styling (selectors and stylesheets). The most practical way to do it is by just recreating it with GenerateBlocks on the Block Element – Site Footer.

This was referring to the general experience. For instance the newsletter plugin I needed to add this as a widget in elementor but its styling was inherited from OceanWp.

If it’s about setting what’s to be inherited, you can assign typography styling through Appearance > Customize > Typography for the headings.

By default, there’s nothing assigned there so newsletter inherited from the direct parent. (which I can't remember what, I tried to recheck but the staging is on maintenance). But if you set something on Appearance > Customize > Typography then it will inherit from there instead, assuming the direct parent loses in CSS precedence.

..My impression is that the basic styling (color, font..) what I set in the customizer is being ignored and a lot of unnessarry customizsation needs to be done.

Some parts that were ignored likely lost in CSS precedence. This means there may be a plugin or a custom CSS that’s styling it already.

The CSS precedence goes by this from lowest to highest chance of getting applied.

1 default WordPress Block styling (/wp-includes/css/dist/block-library/style.min.css)
2 default theme styling (theme’s main.min.css and all.min.css)
3 GP Premium stylesheets (the .css files on wp-content/plugins/gp-premium/ folder)
4 GP Premium customizer gnerated styles (embedded on the page through a <style> tag)
5 Plugins ( .css files coming from plugin folders )
6 custom CSS that have more specific selectors compared to the previous 4 on the list. ( added on a plugin or through Appearance > Customize > Additional CSS )
7 inline CSS (example:

)
8 the use of !important ( example: .entry-meta { background-color: red !important; } )
9 css with !important on an inline CSS (we can’t do anything about this but this is rare. It’s bad practice. )

Now on the case of newsletter plugin, some parts were styled by the plugin (5th on the list) but its heading had no styling to it looks for something to inherit.

Now the thing it will inherit will be defined by specificity of selector that fits from the bottom of the list (9th) to the first on the list. It likely found a matching selector to inherit on 5th of the list as well. Which is likely from a plugin, perhaps GenerateBlocks container wrapper CSS, so it didn’t apply the CSS coming CSS source 4th to 1st. (in your case, 4th. the generated CSS from customizer).

I can be wrong about the specificity of where it inherited.(I can confirm by rechecked) But the point about CSS precedence is still applicable.

[Author]

Posts