Home Forums Weaver Xtreme Theme Footer widget area partly over container area

This topic contains 12 replies, has 3 voices, and was last updated by  dnadesign 6 days, 7 hours ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #59639

    dnadesign
    Participant

    Good Day, Is there a way to have 1 column of the footer widget area to partly overlap into the container area. The desired effect I am trying to accomplish is this.

    I am using Xtreme Plus. Any help would be greatly appreciated

    #59640

    Weaver
    Keymaster

    It might be possible with some custom CSS, but there are issues with <div>s overflowing each other (footer and content areas), and how to handle mobile devices.

    But this is the sort of puzzle @scrambler enjoys, so I will let him think about this one.

    #59641

    scrambler
    Moderator

    There is most likely a few ways to do what you like.

    First can you let us know if you have the “Plus” plugin as that may offer additional solutions.

    Next, setup your footer with three widgets and the image in the middle widget, and post back with a link to the site so I can try a few things with CSS

    #59642

    Weaver
    Keymaster

    He said he does have the Plus plugin.

    #59643

    scrambler
    Moderator

    Miss that ๐Ÿ™‚

    So setup your footer with three widgets and the image in the middle widget, and post back with a link to the site so I can try a few things with CSS

    #59645

    Weaver
    Keymaster

    I think it is a cool design idea myself. Could add it as a guide tip perhaps.

     

    Probably would work best on a per page basis in general as many pages wouldn’t lend themselves to such a covering area.

    #59647

    scrambler
    Moderator

    If you add one text widget, one image widget and one text widget to the Footer widget area and set your footer widget area to three columns, the rule below added to the Theme Global Custom CSS rule box should do what you want on desktop.

    .is-desktop .widget-2 {margin-top:-100px;}

    Now depending how you are setting up the layout on smalltablet and phone, we may need to change the rule a bit

    #59648

    dnadesign
    Participant

    Hi Scrambler,

    Thanks for the reply, Have to rely on a time difference – so apologies for the late response.I have set up a footer widget – But as I have to do it on a per page basis (and I cant make my footer widget area 3 columns as itย  will affect my other pages – once developed). So just to make things more complicated I have set up a per page widget area and used your Wvr X-Plus Flex columns to create a shortcode for the per page footer widget area. I also included the margin-top:-100px; to the custom css for the image text box but didn’t have the desired effect.

    Here is a link to the page, hopefully you can make magic ๐Ÿ™‚

    https://stfrancislife.co.za/photography/

    #59651

    Weaver
    Keymaster

    I think that dealing with the per page issue should be easy. You can define an alternative widget area, then specify to use it as a replacement widget area for the footer on the Per Page Content tab from the page editor.

    #59652

    scrambler
    Moderator
    It works, just getting clipped by the overflow hidden on parents containers.
    Add the rule below to change that
    #footer-widget-area .widget, #wvrx_columns-3 .wvrx-flex-cols {overflow:visible;}
    Now I am not sure why you are nesting a flex columns widget Inside a Custom HTML widget
    #59665

    dnadesign
    Participant

    Hi Scrambler

    #Now I am not sure why you are nesting a flex columns widget Inside a Custom HTML widget –ย Me neither, blonde moment. I have rectified.

    Works well on desktop – Mobile however the first widget area is hidden behind the second. Do you suggest doing a hide if mobile manoeuvre, or can it be fixed using styling?

    #59666

    scrambler
    Moderator

    For mobile, you first need to decide how you want the widgets displayed.

    Right now, you have them stay side by side on desktop and smalltablet, then stack on phones.

    If so, you must not shift it on all device by applying a rule to all. You should either have one rule for desktop and one rule for small tablet with different values, or one for desktop and small tablet with a percentage like below

    .is-desktop .wvrx-fb-col-2 {margin-top:-170px;}
    .is-smalltablet .wvrx-fb-col-2 {margin-top:-70px;}

    or

    .is-desktop .wvrx-fb-col-2, .is-smalltablet .wvrx-fb-col-2 {margin-top:-20%;}

     

     

    #59672

    dnadesign
    Participant

    Thanks Scrambler, Will have a fiddle.

    You are a super star!

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.