Updated – not mobile friendly

Hello @nichere,

The mobile-friendly depends on how you build your website, and you should use online tools to check if the structure is correct. Also, you should build a responsive website. OceanWP theme is fully responsive, and by default, the theme is Mobile-Friendly. In this case, you can use online tools to check your website and solve the issues. Please check this screenshot: https://i.postimg.cc/vmthDY6v/image.png. It is the website’s responsive, which google recognized in this link: https://search.google.com/test/mobile-friendly/result?id=nNOUHcqryMVfZFUYo71G0A.

Also, please check this screenshot: https://i.postimg.cc/0ygLhCRK/image.png. You should solve those issues on this link: https://pagespeed.web.dev/report?url=https%3A%2F%2Fsuperiordigital.com.au%2F.

Here are some articles:
https://developers.google.com/search/mobile-sites/get-started
https://web.dev/responsive-web-design-basics/
https://www.browserstack.com/guide/how-to-make-website-mobile-friendly

I hope it helps.

Best Regards

Thanks for your time, but all you have shown is how to check and test. I cannot see how this is realted to what how wordpress and the Ocean WP theme are rendering the page.

see screen shot here

Hello @nichere,

As I mentioned, it depends on how you build your website; Also, it depends on the blocks you’re currently using. For instance, please check this screenshot: https://i.postimg.cc/T13TyqLf/image.png.

Since your page builder is the block editor, the solution is to fix your website on mobile devices; if your plugin(s) provide responsive size options, you can use those options.

Also, you can build your website responsive at first; Like, don’t use any negative margins or large padding.

Please check this screenshot: https://i.postimg.cc/fyYTQT90/image.png. It seems in this section, the negative margin is set on mobile, so you can change it to fix this problem.

You can use custom CSS if you can’t find any responsive size option. You can learn how to use Chrome Developer Tools or Firefox Developer Tools to help you see and test changes to your CSS:
https://developers.google.com/web/tools/chrome-devtools/
https://developer.mozilla.org/en-US/docs/Tools
CSS Tutorial: https://www.w3schools.com/css/

And for responsive sizes, put your CSS on custom screen size:

@media only screen and (max-width: 480px) {
    /* put your CSS here*/
}

Or use between sizes:

@media (max-width: 960px) and (min-width: 481px){
    /* put your CSS here */
}

For more information about media queries, please read this article:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Best Regards

thank you, i dont want to add any css. i just want to use the wordpress editor. Do you know of any good tutorial to build a nice page using the wordpress editor and oceanwp?

i am using 3 columns a lot because i want the content to be in the centre rather than fully stretched across the page , maybe this is the problem.

Hi @nichere,

You are welcome,

Actually, the current tutorials(even those I searched for) are very general; However, we are working on some video tutorials, and the videos will be released soon.

Using the columns is correct, but it still needs some styling to show sections correctly on responsive sizes.

Update: I forgot to mention that you can also check your website in the backend from the preview dropdown button: https://i.postimg.cc/PxRJGjhQ/image.png. And for the styling, you need something like this: https://i.postimg.cc/XYn0jz2M/image.png(even without custom css).

Best Regards

here is a link to screenshots

this is what i dont understand. i thought this new word press was supposed to be responsive. by using the wordpress editor it is not responsive….since the new upgrade.

i change that section and it looks good on mobile but not on desktop. its so frustrating.

checking the different versions from the backend is totally useless. It does not render the same in reality

look at this
it looks fine in the back end but the preview is not aligned. is this the theme? perhaps i need to try a different theme.

look here

Hello @nichere,

Please check the alignment styling in the block editor: https://i.postimg.cc/Pqsfc3Mp/image.png.

If you can’t see the alignment, perhaps it’s a cache issue. Please check the screenshots here: https://postimg.cc/gallery/1RhNXKr. If you have any cache plugin or server cache(CDN / Browser Cache and Cookies and …), you need to clear its cache contents or disable them to see your changes.

Also, if you think you can reproduce this issue every time, please send a short video about how we can replicate it on a fresh WP. I’ve tested according to the classes on the website’s source and couldn’t replicate it on my end.

Best Regards

I can’t recognize where this CSS comes from in the responsive sizes. Because of the cache or minifier plugin, please check the path of the file: https://i.postimg.cc/XJvwGYy0/image.png.

I have found that the only thing that works well responsive is using a cover and having 3 columns placing the content in the middle column.

this is the only way to get the page responsive.

Hello @nichere,

Okay, I found the CSS in the theme, but it should be overridden like this: https://i.postimg.cc/cLtKzkVw/image.png, and there is no issue on my end.

But it seems the issue is related to the priority of the stylesheets on your website(maybe because of the cache plugin). In addition to your solution, you can use the row/stack block: https://i.postimg.cc/1tMWnzRG/image.png or use custom CSS; however, we’ll investigate this issue more, and if we find any issue on the theme, we’ll fix it for the next updates.

Please put the CSS below in Customizing > Custom CSS/JS > CSS Code:

@media screen and (max-width: 959px) {
    #wrap .entry .alignfull {
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

For more information about the CSS/JS code on the customizer, please read this link:
https://docs.oceanwp.org/article/354-add-custom-css-and-js-to-your-website.

I hope it helps.

Best Regards

i removed all the custom css. it didnt alter the mobile friendlyness on the site.

so i am trying to create new blocks.

can you tell me how to add some space to the right and left side of the page
so that the copy looks nicer on desktop and mobile. but without losing the full width of the covers.
see here

Hi @nichere,

To achieve it, first, you should add that custom CSS for all responsive sizes to fix the priority of the styles. Then, use any block as a wrapper, like these blocks: row, stack, column(s) — screenshot: https://i.postimg.cc/1tMWnzRG/image.png.

Best Regards

Your instruction needs to be clearer.

Is this correct?

Creat a block using 3xcolum, stack and row? all together?