Home Forums Weaver Xtreme Theme Full width phones and tablets

This topic contains 20 replies, has 3 voices, and was last updated by  scrambler 1 week, 1 day ago.

Viewing 16 posts - 1 through 16 (of 21 total)
  • Author
    Posts
  • #61772

    Gunda
    Participant

    Hello,

    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.

    Best regards,

    Gunda

    #61773

    scrambler
    Moderator

    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 noticed

    #61774

    Weaver
    Keymaster

    @scrmbler,

    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?

     

    #61775

    Weaver
    Keymaster

    @scrambler

    Followup –

    I get same, correct results on narrow screens (at least a narrow desktop browser) when applying Align Full just to the header image.

    #61776

    scrambler
    Moderator

    @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.

    https://www.nicolatrwst.com/testnicola/

    If you examine the CSS, you can see the alignfull rules are under an @media rule that only applies above 768px

    #61778

    Gunda
    Participant

    Thanks for your replies and the discussion of a potential bug!

    In case it helps: you can download the exported settings of the website here

    https://vc.clevergedacht.de/wp-content/uploads/2019/10/settings.zip

     

    #61779

    Weaver
    Keymaster

    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.

    #61780

    Gunda
    Participant

    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…

    #61781

    scrambler
    Moderator

    @weaver

    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.

    #61786

    Weaver
    Keymaster

    I’m planning an update by Friday.

    #61797
    Private Reply

    Weaver
    Keymaster
    This reply has been marked as private.
    #61798
    Private Reply

    scrambler
    Moderator
    This reply has been marked as private.
    #61799

    Gunda
    Participant

    @weaver

    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.

    https://vc.clevergedacht.de/

    @scrambler

    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>”

     

    #61800
    Private Reply

    Weaver
    Keymaster
    This reply has been marked as private.
    #61801
    Private Reply

    scrambler
    Moderator
    This reply has been marked as private.
    #61802
    Private Reply

    Weaver
    Keymaster
    This reply has been marked as private.
Viewing 16 posts - 1 through 16 (of 21 total)

You must be logged in to reply to this topic.