CSS to style mobile view

Site URL: https://www.spanishlanguagecentreuk.com/online-courses

I would like some help with CCS code that will correctly size my site for mobile use, keeping all the buttons in the right places, as you can see it goes crazy with the mobile version.

If you recreate anything that has an image AND text using actual image/text blocks, they will resize automatically - try to avoid using images with text in them.

On 7/21/2021 at 9:36 PM, Joey27 said:

Site URL: https://www.spanishlanguagecentreuk.com/online-courses

I would like some help with CCS code that will correctly size my site for mobile use, keeping all the buttons in the right places, as you can see it goes crazy with the mobile version.

Do you need to fix these?

Site URL: https://www.spanishlanguagecentreuk.com/

1. (Tablet – Homepage) Background image doesn’t show in full size

2. (Mobile – Homepage) The same here

3. (Tablet – Homepage) Make text and plus on the same row

4. (Tablet – Footer) Word break

5. (Mobile – Footer) Want to make “Follow us on” and social icons on the same line

6. (Mobile – Overlay menu) Chat icon overlap on button

7. (Online Course) Browser tab name still show “Store 2”

https://www.spanishlanguagecentreuk.com/online-courses

8. (Mobile – Product) Want to show breadcrumb on the top of product? (As on desktop/tablet)

9. (Tablet – Contact us) Make email not break

https://www.spanishlanguagecentreuk.com/contact

I have messaged you, yes please!

18 hours ago, Joey27 said:

I have messaged you, yes please!

Hi. Did you send in forum message or email?

email, however I don't know if it worked, I require all the work you mentioned bar the first page as I have been told you cannot shrink the buttons relative to the pages and the positions would move etc.

so I am thinking everything you mentioned and hiding the first page if we cannot shrink down the button, thank you again for your help! 🙂

On 7/27/2021 at 6:15 PM, Joey27 said:

email, however I don't know if it worked, I require all the work you mentioned bar the first page as I have been told you cannot shrink the buttons relative to the pages and the positions would move etc.

 

so I am thinking everything you mentioned and hiding the first page if we cannot shrink down the button, thank you again for your help! 🙂

 

Sorry for the delay. Do you still need help?

yes please

On 8/9/2021 at 8:40 PM, Joey27 said:

yes please

 

Q4+9. Add to Design > Custom CSS. If it works, let me know, we will continue checking other problems

/* Tablet - contact us */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-section-60ae376771af9257546f74ef .span-12>.row>.col {
    width: 50%;
}
/* footer */
div#block-3f15d02df558a93c2ce6 h4 {
    white-space: nowrap !important;
}
div#block-7dbdb5c6123bfbbf082a h3 a {
    white-space: nowrap;
    margin-left: -10px;
}
}

Hi, 

This made my homepage larger, this is the current code I have:

footer a {
text-decoration: none !important;
}
footer p a:hover {
color:#f7b40f !important }

.header-nav-wrapper a:hover {
color: #f7b40f !important;
}

/* mobile-top banner */
@media screen and (max-width:767px) {
body.homepage article section:first-child {
    min-height: unset !important;
    height: 30vh;

This is before I inserted your code, im mot sure If it affected it, I just want it to fit phone screens properly and maybe get rid of the home page if the button does not fit properly