Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

CSS to style mobile view


Joey27

Question

9 answers to this question

Recommended Posts

  • 0
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.

Screenshot 2021-07-21 at 15.34.49.png

Screenshot 2021-07-21 at 15.35.08.png

Screenshot 2021-07-21 at 15.35.10.png

Do you need to fix these?

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

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

spanishlanguagecentreuk.com-01-min.png

2. (Mobile – Homepage) The same here

spanishlanguagecentreuk.com-02-min.png

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

spanishlanguagecentreuk.com-03-min.png

4. (Tablet – Footer) Word break

spanishlanguagecentreuk.com-04-min.png

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

spanishlanguagecentreuk.com-05-min.png

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

spanishlanguagecentreuk.com-06-min.png

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

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

spanishlanguagecentreuk.com-07-min.png

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

spanishlanguagecentreuk.com-08-min.png

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

https://www.spanishlanguagecentreuk.com/contact

spanishlanguagecentreuk.com-09-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
18 hours ago, Joey27 said:

I have messaged you, yes please!

Hi. Did you send in forum message or email?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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! 🙂

 

Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...