Home / Forums / You Theme Support / Footer widgets layout

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts

  • rivmediawagga
    Participant

    I currently have 3 widgets in my footer which looks fine until you get to smaller resolutions where it switches from 4 columns for each widget straight to the full width 12 columns for each. I would like to be able to edit each widget section so the first two can be 6 columns wide on smaller resolutions and then only go 12 columns wide on mobile…. There’s just way too much empty space otherwise.


    rivmediawagga
    Participant

    I currently have the group slider set to show 4 columns which looks fine until you get to smaller resolutions where it switches from 4 columns straight to the full width 12 columns for each image.
    How do I change this to 6 at first and then 12 on mobile?


    rivmediawagga
    Participant

    Where exactly are the responsive elements in the css files?
    I want to modify a few things but the setup with this theme is different to what I normally see.
    For example, the media queries are normally something like this:
    @media (max-width: 767px) {

    But in your theme all I can find are queries that look like this which I don’t understand:
    @media only screen and (min-width: 40.063em) {

    I want to be able to modify the following:
    – heading sizes on smaller resolutions
    – And for some elements I would like to select 6 columns wide on mobile view, but have this adjust via CSS to full width for very small mobiles. This is how I have done it in other themes, but again because of this different set-up I can’t figure out how to do it in yours:

    @media (max-width: 525px) {
    .row .col-xs-6 {
    clear: both;
    width: 100%;
    }
    }

    Hi @rivmediawagga

    It is not recommended to touch the theme files because once a theme update is applied, it will overwrite any changes that you applied.

    If you plan to add more CSS styles, you can do so under the WP Dashboard > Theme Options > Custom CSS. Here you have boxes for Custom CSS and Mobile CSS and this is where you apply any CSS changes you want to override any existing CSS.

    If you still need help on that footer widgets responsive layout and group slider, please send over the site where you are having this issue so we can check what we can do.

    Thanks!


    rivmediawagga
    Participant

    I’m happy to replace the theme files when the theme is updated if I have to.
    Regardless you haven’t provided any info as to how to make the other changes I mentioned??

    Obviously I know where ti place the CSS changes, but you haven’t actually provided the code.

    Also, I didn’t receive your above reply via email. This forum seems to be very buggy.

    Hi @rivmediawagga

    My apologies as I was assuming you figured out how to change them on your own.

    The CSS for responsiveness should be under the theme’s style.css, but again, the rules there now are far more generic. Using the Custom CSS box is still the best option so you don’t break the site’s current styles.

    You can use this CSS to switch the footer widgets to 2 columns on slightly larger mobile screens
    @media only screen and (min-width: 500px) and (max-width: 1024px) {

    #footer-wrap .block.columns {
        width: 50%;
        float: left;
    }
    }

    For the site’s heading sizes, it depends on which headers you want updated and what sizes to apply per dimension.

    You can add your heading sizes on the CSS code block above as well.

    Thanks!


    rivmediawagga
    Participant

    Unfortunately that didn’t work.
    It made the 3rd column sit on the right hand side for some reason?
    see screenshot – http://prntscr.com/cyhh8h

    I even added some padding on the bottom (see code below) in case it was that but still no luck.

    #footer-wrap .block.columns {
    width: 50%;
    float: left;
    padding-bottom:60px;
    }

    As mentioned above, I would also like to resolve this issue for the group slider too.

    Hi @rivmediawagga

    That CSS code is for our demo site. Please send over your site’s URL and login credentials so we can check on this further.

    Regards,


    rivmediawagga
    Participant
    This reply has been marked as private.

    Hi @rivmediawagga

    This should now be fixed both on footer and group slider. Please check your site and confirm.

    Regards,


    rivmediawagga
    Participant

    Thanks, I found the code that you added. I had to edit it again though as some of the content was being cut off in the footer, but I’ve got what I needed. Thanks.

    You’re welcome, @rivmediawagga

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

You must be logged in to reply to this topic.