October 1, 2019 at 10:38 UTC - Views: 95 #61772AnsweredGundaParticipant
I am working on this page: https://vc.clevergedacht.de/
The header image and the footer should be full width. In the desktop view everything works as it was meant to be (at least in my browser) but on phones and tablets these areas are not full width.
I tried to activate the check boxes in the “Extend BG Attributes to Full Width” area but after saving the tick is deleted again.
Does anyone have an idea what I am doing wrong? Thanks in advance for your support.
GundaOctober 1, 2019 at 17:13 UTC - Views: 96 #61773
Well it seems you have hit a bug and I am surprised it did not came up before.
When expanding the areas using their Align option Alignfull, the CSS is only applied on Desktop.
@weaver will have to investigate, but in the mean time, you can use the old method using the stretch option found in the Main Options > Full Width page.
BUT you must first set the align area options to center as you cannot use both align full and the full width stretch together.
So switch the align options from alignfull to center (in header, header image and footer widget area) , and then go to Main options full width, and check the Stretch header Image and Stretch Footer widget area (do not check the extend BG attribute or extend BG color).
@weaver, I made a test on my test site with alignfull on header image and footer widget area, and the stretching rules are under an @media rule with min-width:768, so on mobile there are no stretching rules and the full width is not present. So if there are any padding involved the area is no longer edge to edge with the browser.
Not sure if that happened recently or was always there and nobody noticedOctober 1, 2019 at 20:00 UTC - Views: 88 #61774
Am I missing something?
If I select the “Blank” subtheme, and select Align Full as the alignment for the header area, I get what is expected.
If I select the Go Basic Traditional theme, the menu is fixed to the top, and this apparently takes the menu out of the header logically, but then applying Full Alignment to the menu makes it Align Full as well.
If I use the One-Step Site Layout, as in the Arctic White subtheme, then things seem to get a bit screwy as the One-Step then seems to override the Allign Full when that option is applied to the Header.
Perhaps you could save the settings on your test site and send me the .zip file of those settings?October 1, 2019 at 20:07 UTC - Views: 82 #61775
I get same, correct results on narrow screens (at least a narrow desktop browser) when applying Align Full just to the header image.October 1, 2019 at 21:38 UTC - Views: 88 #61776
@weaver, Make sure you have padding and margins on the wrapper and or the header or else you could not see it.
You can see it on my test site below where the header image is set to alignfull.
When you reduce the browser to mobile size, the wrapper and area padding make the image not fullwidth.
If you examine the CSS, you can see the alignfull rules are under an @media rule that only applies above 768pxOctober 2, 2019 at 11:32 UTC - Views: 73 #61778
Thanks for your replies and the discussion of a potential bug!
In case it helps: you can download the exported settings of the website hereOctober 2, 2019 at 14:58 UTC - Views: 69 #61779
The padding is the thing I missed.
So, I guess this is a bug that has been there since Align Full/Wide was added to Weaver Xtreme.
The original logic for align full was that it really only applied to desktops. But even that logic was flawed. The “real” logic should have applied to the theme width. The whole method Weaver uses to style full and wide widths is based on calc and vw. I spent a lot of effort getting the best values for the calcs and vws, but the whole time I was doing that, I assumed that those stylings were necessary and needed only when the screen width was wider than the theme width (or even desktop width – 768). That was right, but that also failed to account for padding.
So, after some testing (need to do more), it seems the full/wide styles are correct, but simply can (and should) be applied all the time – obviously even on mobile devices.
I’m not sure about wide rules yet. On desktops, alignwide is supposed to allow images, etc, to be a bit wider than 100% width, but with left/right padding, unlike the way full should work.
I’m not really sure of what the right interpretation for wide really is – wider than the theme width, but then 100% below theme width? That would mean that wide images should become the equivalent of align full on devices narrower than theme width. I don’t think they work that way now.
These fixes will certainly change the look of some existing designs, but the current implementation is clearly wrong.October 2, 2019 at 15:20 UTC - Views: 62 #61780
Thanks for testing!
Do you think that there will be an update with a fix? If there is an update I will just wait for it and leave the settings as they are now. If not, I will have to try the work around mentioned by Scrambler…October 2, 2019 at 16:38 UTC - Views: 68 #61781
“So, after some testing (need to do more), it seems the full/wide styles are correct, but simply can (and should) be applied all the time – obviously even on mobile devices.“
That makes sense and is what the previous stretch option did
“I’m not really sure of what the right interpretation for wide really is – wider than the theme width, but then 100% below theme width?“
I never quite understood alignwide the way it is, as it gives an image/area wider that the site on large browser, but smaller than the site on smaller browser, and then as large as the site on mobile.
So if you start with a large browser and slowly reduce it, the image/area will first contract, then expand which I find inconsistent in terms of site look.
In my mind, if it starts wider than the wrapper, then it should never become smaller than the wrapper, but that means you would have to compute at what browser size that happens. You seem to use a percentage of the browser, so normally the @media rule threshold would be when the % of the browser = the wrapper width.October 2, 2019 at 18:48 UTC - Views: 56 #61786
I’m planning an update by Friday.October 4, 2019 at 01:11 UTC - Views: 81 #61797October 4, 2019 at 01:43 UTC - Views: 64 #61798Private ReplyscramblerModeratorThis reply has been marked as private.October 4, 2019 at 08:16 UTC - Views: 54 #61799
Thanks for working on an update and sorry for the late reply – as I leave in Germany I was still sleeping. 😉
I tried the update the theme by overwriting the files of the old version (after a backup of the old files).
At least at a first glance the mobile version looks as it should now.
I tried to find the settings you mentioned to check if I had implemented them by mistake. Some seem to be the default settings:
“<small>Header Widget Area: Width of Area in % of enclosing area on desktop and small tablet. Hint: use with Center align. Use 0 to force auto width. (Default if blank: auto)</small>”
“<small>Info Bar: Width of Area in % of enclosing area on desktop and small tablet. Hint: use with Center align. Use 0 to force auto width. (Default if blank: 100%)</small>”October 4, 2019 at 17:33 UTC - Views: 44 #61800October 4, 2019 at 17:47 UTC - Views: 46 #61801Private ReplyscramblerModeratorThis reply has been marked as private.October 4, 2019 at 23:32 UTC - Views: 30 #61802
- You must be logged in to reply to this topic.