Title: Updated – not mobile friendly
Last modified: October 10, 2022

---

# Updated – not mobile friendly

 *  [nichere](https://wordpress.org/support/users/nichere/)
 * (@nichere)
 * [3 years, 7 months ago](https://wordpress.org/support/topic/updated-not-mobile-friendly/)
 * Hi I just updated my site but i have found it is not mobile friendly. Can you
   help with this please
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fupdated-not-mobile-friendly%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 15 replies - 1 through 15 (of 18 total)

1 [2](https://wordpress.org/support/topic/updated-not-mobile-friendly/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/updated-not-mobile-friendly/page/2/?output_format=md)

 *  [Shahin](https://wordpress.org/support/users/skalanter/)
 * (@skalanter)
 * [3 years, 7 months ago](https://wordpress.org/support/topic/updated-not-mobile-friendly/#post-16087722)
 * Hello [@nichere](https://wordpress.org/support/users/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](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](https://search.google.com/test/mobile-friendly/result?id=nNOUHcqryMVfZFUYo71G0A).
 * Also, please check this screenshot: [https://i.postimg.cc/0ygLhCRK/image.png](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](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://developers.google.com/search/mobile-sites/get-started)
   [https://web.dev/responsive-web-design-basics/](https://web.dev/responsive-web-design-basics/)
   [https://www.browserstack.com/guide/how-to-make-website-mobile-friendly](https://www.browserstack.com/guide/how-to-make-website-mobile-friendly)
 * I hope it helps.
 * Best Regards
 *  Thread Starter [nichere](https://wordpress.org/support/users/nichere/)
 * (@nichere)
 * [3 years, 7 months ago](https://wordpress.org/support/topic/updated-not-mobile-friendly/#post-16090841)
 * 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](https://imgur.com/xMFoAbp)
 *  [Shahin](https://wordpress.org/support/users/skalanter/)
 * (@skalanter)
 * [3 years, 7 months ago](https://wordpress.org/support/topic/updated-not-mobile-friendly/#post-16091431)
 * Hello [@nichere](https://wordpress.org/support/users/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](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](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://developers.google.com/web/tools/chrome-devtools/)
   [https://developer.mozilla.org/en-US/docs/Tools](https://developer.mozilla.org/en-US/docs/Tools)
   CSS Tutorial: [https://www.w3schools.com/css/](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](https://www.w3schools.com/css/css_rwd_mediaqueries.asp)
 * Best Regards
 *  Thread Starter [nichere](https://wordpress.org/support/users/nichere/)
 * (@nichere)
 * [3 years, 7 months ago](https://wordpress.org/support/topic/updated-not-mobile-friendly/#post-16092087)
 * 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.
 *  [Shahin](https://wordpress.org/support/users/skalanter/)
 * (@skalanter)
 * [3 years, 7 months ago](https://wordpress.org/support/topic/updated-not-mobile-friendly/#post-16092230)
 * Hi [@nichere](https://wordpress.org/support/users/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](https://i.postimg.cc/PxRJGjhQ/image.png).
   And for the styling, you need something like this: [https://i.postimg.cc/XYn0jz2M/image.png(even](https://i.postimg.cc/XYn0jz2M/image.png(even)
   without custom css).
 * Best Regards
 *  Thread Starter [nichere](https://wordpress.org/support/users/nichere/)
 * (@nichere)
 * [3 years, 7 months ago](https://wordpress.org/support/topic/updated-not-mobile-friendly/#post-16092609)
 * [here is a link to screenshots](https://postimg.cc/gallery/85yN28p)
 * 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.
 *  Thread Starter [nichere](https://wordpress.org/support/users/nichere/)
 * (@nichere)
 * [3 years, 7 months ago](https://wordpress.org/support/topic/updated-not-mobile-friendly/#post-16092617)
 * checking the different versions from the backend is totally useless. It does 
   not render the same in reality
 *  Thread Starter [nichere](https://wordpress.org/support/users/nichere/)
 * (@nichere)
 * [3 years, 7 months ago](https://wordpress.org/support/topic/updated-not-mobile-friendly/#post-16092623)
 * 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](https://postimg.cc/gallery/YqJdQgh)
 *  [Shahin](https://wordpress.org/support/users/skalanter/)
 * (@skalanter)
 * [3 years, 7 months ago](https://wordpress.org/support/topic/updated-not-mobile-friendly/#post-16092702)
 * Hello [@nichere](https://wordpress.org/support/users/nichere/),
 * Please check the alignment styling in the block editor: [https://i.postimg.cc/Pqsfc3Mp/image.png](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](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
 *  [Shahin](https://wordpress.org/support/users/skalanter/)
 * (@skalanter)
 * [3 years, 7 months ago](https://wordpress.org/support/topic/updated-not-mobile-friendly/#post-16092726)
 * 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](https://i.postimg.cc/XJvwGYy0/image.png).
 *  Thread Starter [nichere](https://wordpress.org/support/users/nichere/)
 * (@nichere)
 * [3 years, 7 months ago](https://wordpress.org/support/topic/updated-not-mobile-friendly/#post-16092796)
 * 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.
 *  [Shahin](https://wordpress.org/support/users/skalanter/)
 * (@skalanter)
 * [3 years, 7 months ago](https://wordpress.org/support/topic/updated-not-mobile-friendly/#post-16092866)
 * Hello [@nichere](https://wordpress.org/support/users/nichere/),
 * Okay, I found the CSS in the theme, but it should be overridden like this: [https://i.postimg.cc/cLtKzkVw/image.png](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](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](https://docs.oceanwp.org/article/354-add-custom-css-and-js-to-your-website).
 * I hope it helps.
 * Best Regards
 *  Thread Starter [nichere](https://wordpress.org/support/users/nichere/)
 * (@nichere)
 * [3 years, 7 months ago](https://wordpress.org/support/topic/updated-not-mobile-friendly/#post-16093125)
 * 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](https://postimg.cc/GBg9yc47)
 *  [Shahin](https://wordpress.org/support/users/skalanter/)
 * (@skalanter)
 * [3 years, 7 months ago](https://wordpress.org/support/topic/updated-not-mobile-friendly/#post-16094884)
 * Hi [@nichere](https://wordpress.org/support/users/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](https://i.postimg.cc/1tMWnzRG/image.png).
 * Best Regards
 *  Thread Starter [nichere](https://wordpress.org/support/users/nichere/)
 * (@nichere)
 * [3 years, 7 months ago](https://wordpress.org/support/topic/updated-not-mobile-friendly/#post-16095518)
 * Your instruction needs to be clearer.
 * Is this correct?
 * Creat a block using 3xcolum, stack and row? all together?

Viewing 15 replies - 1 through 15 (of 18 total)

1 [2](https://wordpress.org/support/topic/updated-not-mobile-friendly/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/updated-not-mobile-friendly/page/2/?output_format=md)

The topic ‘Updated – not mobile friendly’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/oceanwp/4.1.5/screenshot.png)
 * OceanWP
 * [Support Threads](https://wordpress.org/support/theme/oceanwp/)
 * [Active Topics](https://wordpress.org/support/theme/oceanwp/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/oceanwp/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/oceanwp/reviews/)

 * 18 replies
 * 3 participants
 * Last reply from: [Shahin](https://wordpress.org/support/users/skalanter/)
 * Last activity: [3 years, 6 months ago](https://wordpress.org/support/topic/updated-not-mobile-friendly/page/2/#post-16203088)
 * Status: not resolved