Need mobile responsiveness/footer responsiveness

Support
#1

My logo is too big and won’t shrink for mobile, also my footer containers are mashed together on mobile. I’m not sure if there is a way to change the look on mobile without affecting the overall look of the website. I tried to change the mobile look and it changed EVERYTHING, man that sucked. I have tried several CSS “fixes” in the forums. Please advise, ty:)

#2

Hi there,

Thanks for writing in! Can you please share the site URL so we can take a closer look?

Thanks!

#3

if I may add to my question, how do I get the owl graphic icon in the footer to be centered in the white circle? this is its default position but it is not centered? also, I did some fixing with the padding on tablet and mobile for the footer so everything isn’t so close together but it is not as nice as the desktop version. In the mobile version, you will also notice the graphic icons are oval shaped, stretched, need regular circle like desktop. thank you for helping:)

most important, the logo needs to be mobile responsive, or reposition for the mobile/tablet

#4

Hi There,

Please add this custom CSS under Pro > Theme Options > CSS:

@media (max-width: 979px){
    a.x-brand.img {
        position: static;
        width: 100px;
        padding: 5px;
    }

    a.ubermenu-responsive-toggle {
        float: right;
        margin-top: 25px;
    }

    .x-navbar .ubermenu.ubermenu-main {
        margin-top: 0;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 0;
    }
}

a.e1331-10.x-anchor.x-anchor-button i {
    margin-left: -6px;
}

Let us know how it goes!

#5

EXCELLENT! that did the trick for the logo, thank you. The only thing it didn’t change was the social media buttons in the footer. On tablet and mobile they are still “stretched” vertically when they are supposed to be round. AND thank you very much for shortening the menu button on mobile, looks great! Please advise on the social media icons:)

#6

Hi There,

Please add a minimum and maximum 50px height and width to your social element.


Sorry but the way you layout your footer now is not so responsive and adding more custom CSS to it will just complicate things. I would advise that you hide your footer bars on mobile view (small and extra small screen). Then create a new Bar that is only visible to mobile view as opposed to your current Bars for desktop view. This way you can structure your footer on mobile view the way you want without affecting the desktop view layout.

Hope it helps,
Cheers!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.