SYDNEY THEME mobile site not responsive

Hi,

I have just launched my website ( which looks great on computer view) however in mobile view the rows are overlapping and it looks terrible.

It is happening across the pages and mainly where I have set a custom row height.

I have tried deactivating/activating plugins etc as advised in the forums but with no luck.

My website is buildit123.com.au.

Thank you in advance for your help.

regards,
Sarah

Hello Sarah,

I’d like to help, but I couldn’t get the responsiveness issue you meant. I checked your site’s responsiveness with Google’s mobile friendly tester tool. It’s reporting that your site is mobile friendly.

Maybe you got certain element doesn’t meet your design requirement on mobile screen? Please take a screenshot of it and share here. So I could suggest you with possible solution.

Regards,
Kharis

Hi Kharis,

Thank you for getting back to me so quickly.

I have attached a screenshot from my mobile to show the issue. It is from the homepage but a similar thing is happening on all my pages in muany places.

I suspect it has something to do with my custom row heights that aren’t translating to a mobile view? I’m new to this so I’m just guessing here!

regards,
Sarah

Hello there,

Please try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 1199px) {
      #panel-w5af90a6762aef-1-0-0> .panel-widget-style {
        height: auto !important;
      }
    } 

Regards,
Kharis

Hi Kharis,

I added the code but it didnt appear to do anything>

Any other ideas?

regards,
Sarah

Hello Sarah,

Try clearing any applied cache in both your site and web browser, as it usually blocks new code addition to take effect.

Regards,
Kharis

Hi Kharis,

I emptied both caches but still no luck.

FYI - I have an iphone7 - the display is the worst on it.
I have tried it on a Google pixel2 (larger screen size) and it looks much better but still with a bit of overlap.
On an IPAD mini screen - it looks pretty good - so screen size is definately having an affect.

regards,
Sarah

Hello Sarah,

Sorry for suggesting incorrect code. Please try this one:

    @media only screen and (max-width: 1199px) {
      #panel-w5af90a6762aef-1-0-0> .panel-widget-style {
        height: auto !important;
      }
    }  

Regards,
Kharis

Hi Kharis,

No luck again. I inserted the CSS code and emptied both caches…

regards,
Sarah

When you manually set a lot of your row heights and images dimensions, were you constant with units? My guess (emphasis on guess) is the issue is that you’re using a combination of pixels, %s, maybe even vw/vh.

Hi, greenblu,

Thanks for taking the time to input! Any suggestion is worth considering at this point.
However, I used px consistently so don’t think that is the issue.

Hopefully, I’ll get this sorted soon.

regards,
Sarah

Hi Kharis,

Have you got any other ideas as how to solve this problem?

regards,
Sarah

Hello there,

Please try this code:

    @media only screen and (min-width: 992px) and (max-width: 1199px) {

      #panel-w5afa20c34766b-1-0-0 > .panel-widget-style { 
        height: auto !important;
      }

      #panel-w5af90a6762b49-0-0-0 .panel-widget-style {
        padding: 22px 30px !important;
      }

      #panel-w5afa20c34766b-1-0-0 > .panel-widget-style h2 {
        font-size: 25px;
        margin-bottom: 18px;
      }

      #pg-w5af90a6762b49-1 > div {
        padding-top: 0 !important;
      }  

    }

    @media only screen and (min-width: 781px) and (max-width: 991px) {

      #panel-w5afa20c34766b-1-0-0 > .panel-widget-style { 
        height: auto !important;
      }
      
      #panel-w5afa20c34766b-1-0-0 > .panel-widget-style h2 {
        font-size: 20px;
        margin-bottom: 18px;
      }

      #panel-w5af90a6762b49-0-0-0 .panel-widget-style {
        padding: 5px 10px !important;
        padding-bottom: 0 !important;
      }

      #pg-w5af90a6762b49-1 > div {
        padding-top: 0 !important;
      }  
      
      #panel-w5af90a6762b49-1-0-0 .ow-button-base > a {
        padding: 8px 20px !important;
      }
      
    } 

Regards,
Kharis

Hi Kharis,

I added the code to ‘Additional CSS’ , and emptied both caches… but still nothing has changed on my mobile view.

regards,
Sarah

Hello Sarah,

Check all of your custom CSS code with this tool, and ensure it doesn’t contain any error.

Regards,
Kharis

Hi Kharis,

I checked my CSS using the tool. All the code was fine - however, this process, made me review all my additional code ( of which there really isn’t much!)

I think I have solved my problem - its almost embarrassingly simple and so obvious - now ( I did say I was new to this website stuff…)
As I previously suspected, the problem lay with my setting custom row heights in specific Rows through Widget Styles> Attributes>CSS Styles.
The solution was to add the following code to Mobile CSS Styles.
{
height: auto
}

Hope this helps someone else out there who is having similar issues.

These forums have been an invaluable source of information for me.

Kharis, Thank you so much for your patience.

regards,

Sarah

Awesome Sarah! You figured that out! Thank you so much for sharing.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis