Problems with mobile layout 2

  • yxda

    (@yxda)


    6 months, 3 weeks ago

    Hi Kharis,

    Thanks for getting back to me. I started this topic again, so I could attach the link to the site as you requested. I am using a Sydney Child theme based on the customization of an older version of Sydney theme. The site generally appears good on desktop, but having problems on mobile. I prepared the site few years ago and it used to work well, but after the site was down I uploaded my site to a new host and these issues appeared:

    • In the header, the hamburger menu icon doesn’t appear on mobile. Color is set in Offcanvas Menu, though.
    • In the Hero Slider, there are two slides with separate title, subtitle and button. However, their layout doesn’t fit on mobile. The title and subtitle push down the button that does not appear correctly or at all.

    I would appreciate your help.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Kharis Sulistiyono

    (@kharisblank)

    6 months, 3 weeks ago

    Hi @yxda,

    To apply the desired styling, please add the following CSS code to your dashboard under:
    Appearance > Customize > Additional CSS.

    .text-slider .maintitle {
      font-size: 20px;
    }

    .text-slider .subtitle {
      padding: 5px 0;
    }
        
    .site-header .btn-menu {
      position: relative;
      width: 30px;
      height: 3px;
      background: white;
      border: none;
      cursor: pointer;
      padding: 0;
      margin: 0;
      transition: background 0.3s ease;
    }

    .site-header .btn-menu:before,
    .site-header .btn-menu:after {
      content: '';
      position: absolute;
      left: 0;
      width: 100%;
      height: 3px;
      background: white;
      transition: all 0.3s ease;
    }

    .site-header .btn-menu:before {
      top: -8px;
    }

    .site-header .btn-menu:after {
      bottom: -8px;
    }

    .site-header .btn-menu.active {
      background: transparent;
    }

    .site-header .btn-menu.active:before {
      top: 50%;
      transform: translateY(-50%) rotate(45deg);
    }

    .site-header .btn-menu.active:after {
      bottom: 50%;
      transform: translateY(50%) rotate(-45deg);
    }
        
    @media only screen and (max-width: 767px) {

      .site-header .btn-menu {
        margin-left: auto;
        margin-right: auto;
      }

      .site-header .col-md-4 {
        height: 80px;
      }
      
    }

    Hope that helps.

    Thread Starter yxda

    (@yxda)

    6 months, 3 weeks ago

    Thank you, Kharis. It works perfectly and is much appreciated!

    Thread Starter yxda

    (@yxda)

    6 months, 3 weeks ago

    Sorry, just one more thing! I’ve noticed that the font size of the titles and the padding between the subtitle and the button in the Hero Area have also changed on desktop. While the new sizes look great on mobile, they appear too small on desktop. Would it be possible to keep the original sizes for desktop and apply the new, smaller ones only on mobile?

    Thanks in advance.

    Thread Starter yxda

    (@yxda)

    6 months, 2 weeks ago

    I added something to it, and it seems to be working now. Thanks for your help.

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

The topic ‘Problems with mobile layout 2’ is closed to new replies.