[pesi]

The theme does not appear to be fully responsive – for example on my page: https://mediapower.ca/our-services/web-design-for-businesses/ 

The header shows to be nicely responsive but the body is not when viewed on a mobile device. Even the videos – e.g. on the page: https://mediapower.ca/our-services/digital-video-for-businesses-and-professionals/corporate-video/ neither the page body nor the video is responsive on mobile devices.

Could someone please advise.

Thanks in advance.

Pesi

[Skandha]

@pesi: Hello Pesi,

Can you please try deactivating all the plugins you are using and check if the site is responsive?

Let me know if the issue persists!
Kind Regards,
Skandha

[pesi]

Hi – I deactivated every single one of the plugins and it was still not responsive.

However, when I removed your theme and replaced it with Twenty Twenty-Two, the responsiveness worked fine.

It is something to do with your theme.

Please advise urgently.

Many thanks.;

[Sakin]

@pesi: I just check your site and see that you have Custom CSS which is causing issues with responsive. Can you check your CSS at “Appearance => Customize => Custom CSS”,  you need to find the following CSS:

/* One Column (No Sidebar, Content Width) */
.no-sidebar.content-width #main {
    display: block;
    float: none;
    margin: 0 auto;
    width: 1200px;
}

Replace that with

/* One Column (No Sidebar, Content Width) */
.no-sidebar.content-width #main {
    width: 100%;
}

[pesi]

Your suggested code replacement works well for most pages which are full-width, but not for those pages which have the video embedded within a table, which I use to layout the page items.

As an example please see: https://mediapower.ca/our-services/digital-video-for-businesses-and-professionals/corporate-video/

The video player is so small it is invisible on a mobile device.\

Thanks

[Sakin]

@pesi: You have an issue with Tabel because of the video inside the table. The table cell adjusts as per the screen. So, you will have no control over the video width. Also, that table is fixed with percentage width. So, we cannot do anything with CSS. So, try using a responsive column. But if you want to overwrite the fixed style on that page, then you can add the following CSS:

@media screen and (max-width: 990px) {
 .page-id-896 table td {
  width: 100% !important;
  display: block;
  box-sizing: content-box;
 }
}

[pesi]

Thanks Sakin – I just used CSS columns instead of tables and that worked really well.

Best regards,

Pesi

[Sakin]

Hi Pesi,

Nice to hear back from you and glad that my support worked on your website. Thanks for using the Catch Responsive theme. If it’s not too much trouble, I have a quick request: could you please leave an honest review? https://wordpress.org/support/theme/catch-responsive/reviews/#new-post. Your review will help others know what to expect when they’re looking for the support I offer. Even a sentence or two would be hugely appreciated. Thanks, and if there’s anything else at all that I can do to help, don’t hesitate to let me know. Have a good day! 🙂

Regards,
Sakin

[Author]

Posts