Edit mobile layout

  • Hello, I would like to make several changes to the mobile layout of the Virtue theme, and I need some help. I tried some suggestions in the forum, but none worked. My website is: https://www.twofoldshop.com

    1) My logo/header size is based on the desktop version of the website, where the logo is centered on a long white rectangular background. In mobile, this entire rectangle shrinks, so the logo is now extremely small. How do I enlarge the logo on mobile site?

    2) How can I shrink the white space on both sides of my mobile site, so that content appears larger/fills up the phone display?

    3) My desktop site currently uses a 4 column footer. On the mobile site, the footer appears vertically stacked. How can I change the mobile version footer into a 2 by 2 table? (Please see Bando.com’s footer as an example)

Viewing 7 replies - 1 through 7 (of 7 total)

  • 1. I believe that your best bet for more control over your logo size would be to get rid of the white space on the side of your image, and increase the logo size via CSS in mobile views.

    I’m trying with CSS to get your logo to be bigger in mobile, but the sides of the image are making it so I can’t increase the size of the image while keeping it centered.

    Ideally, you’ll want your logo to be just the text with transparency on the rest of the image.

    2. Try setting the site layout to Fullwidth rather than boxed in Appearance> Theme Options> Main Settings> Site Layout Style.

    3. I’m working on the CSS, but it’s likely we’ll have to wait for the Theme Dev or another support person to solve this.

    Thread Starter shoptwofold

    (@shoptwofold)

    Thanks, Kevin. I went through your suggestions:

    1. I made a separate logo file for mobile, it leaves out the extra white space. And I uploaded it under ‘Upload Your @2x Logo for Retina Screens’. Whereas the logo for desktop I left as-is. Is the logo for retina screen only shown for mobile users only?

    2. I tried the boxed layout and the full-width layout, but there were no change to the width of the mobile layout. Any other ideas?

    3. Please keep me updated on the footer.

    Thank you!

    Hey,

    Is the logo for retina screen only shown for mobile users only?

    – no thats not how retina works because there are lots of desktop screens that are retina.

    But you can override the defualt functionality of retina logo and make it only show on mobile with css like this:

    #logo .kad-retina-logo {
    display: none;
}
#logo .kad-standard-logo {
    display: block;
}
@media (max-width: 767px) {
    #logo .kad-retina-logo {
        display: block;
    }
    #logo .kad-standard-logo {
        display: none;
    }
}

    2. add this css and let me know if it’s what you are thinking:

    @media (max-width: 767px){
    .container {
        padding: 0 2px;
    }
}

    3. add this css:

    @media (max-width: 768px){
.footercol1, .footercol2, .footercol3, .footercol4 {
    float: left;
    width: 50%;
}
.footerclass select {
    max-width: 100%;
}
}

    Kadence Themes

    Thread Starter shoptwofold

    (@shoptwofold)

    Everything worked! However, I noticed there’s a considerable gap between the website’s content and the footer. Is there anyway to move the footer up a bit for both desktop and mobile?

    Thanks very much again!

    Try this CSS to reduce the space.

    .contentclass {
    padding-bottom: 0;
}

    Let me know if that works for you.

    Thread Starter shoptwofold

    (@shoptwofold)

    I tried the code, it shifted the entire footer along with the background up. I would only like to move the footer up, and the background (of footer) remains the same spot. Any ideas how to fix it? Thank you!

    Try this instead.

    footer#containerfooter {
    padding-top: 0;
}

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Edit mobile layout’ is closed to new replies.