Make website 100% mobile responsive

[MeesterGijs]

I don't know how to adjust/change/add custom CSS so that all content is mobile responsive. Here are some screenshots of major issues I have. Could you help me fix these? shopping card course page blog posts overview course button Thank you so much, again. Gijs

[Diana]

@meestergijs, Shopping cart: @media(max-width:991px){ .woocommerce .cart .button[name=apply_coupon]{ font-size:10px; }   .woocommerce .cart .button[name=update_cart]{ right:20px; font-size:10px; top:-20px } } Course page: @media(max-width: 991px) { .single-course.c2 .course_header #item-header-content h1{ font-size: 25px; } } This is already aligned: http://prntscr.com/l58scm

[MeesterGijs]

Hi Diana, I've put all your code in customizer, but nothing changed (also the alignment..). Could it be server caching?

[Diana]

@MeesterGijs, For the course Button: This is the structure of the course page that in the mobile version the course button will be visible at the bottom. I can give you the code to show the course button at the top for the mobile version. But the code will show two buttons on the course page. Another alternative is that you can use tab style course layout so your users find it easier and they need not scroll the whole page: https://wplms.io/support/knowledge-base/tabs-style-in-course-menu-with-custom-sections/ Other custom css not working: You can check the customizer in which you have added the heading too. The customizer is processing it as a code. You have to add only custom CSS in the customizer. You cannot paste the text like this. If you want to add then make it as a comment so the customizer will not interpret it as a custom CSS. Refer: http://prntscr.com/l66wi8 I have fixed this for single course page. http://prntscr.com/l66xnr    

[MeesterGijs]

I can give you the code to show the course button at the top for the mobile version. But the code will show two buttons on the course page. Would you please give me the code. And, which two buttons will it show? Another alternative is that you can use tab style course layout  No option. Other custom css not working: You can check the customizer in which you have added the heading too. The customizer is processing it as a code. You have to add only custom CSS in the customizer. You cannot paste the text like this. If you want to add then make it as a comment so the customizer will not interpret it as a custom CSS. I know, stupid me. I forgot that one.. I have fixed this for single course page. Thank you

[MeesterGijs]

Btw, how do I fix this one? blog post overview

[Diana]

This reply has been marked as private.

[MeesterGijs]

About the blog post page.. Does that say anything about my phone? I have a Google Pixel 2 XL. One month old..

[Diana]

@meestergijs I don't understand this part of your issue. You want me to reduce the size of the image on that page. So the text will be visible beside the image. Do you want this?

[MeesterGijs]

You can close this topic. It has been solved.

[Diana]

@meestergijs Thanks for confirming

[Author]

Posts