Truncated view on mobile

truncated image when viewed on mobile
when viewing our site on mobile, parts of site show truncated view.
please assist

Hello there,

To fix it, try adding the below CSS snippet into your site’s additional CSS option under Appearance > Customize > Additional CSS:


@media only screen and (max-width:320px){
  
  .woocommerce-page table.cart #coupon_code {
    width: 100% !important;
    margin-bottom: 8px;
  }  
  
  .woocommerce-page table.cart input[name="apply_coupon"]{
    width: 100% !important;
  }
  
  .woocommerce-page a.checkout-button{
    font-size: 14px !important;
  }
  
}

Regards,
Kharis

Hello Kharis,

Wishing you Happy New Year and thank you for always being supportive through 2016.

Noted your CSS code given.

  1. We have installed Simple CSS plugin and Site origin CSS. Will it clash with your theme if these two plugins are installed at the same time?

  2. As you had suggested we install Simple CSS in 2016 and we have quite a lot of code from you saved in that plugin (Simple CSS). Now the new plugin that we installed Site Origin CSS to tweak some colors only (as I am not good at detailed work). Do you suggest that I should “copy and paste” all your CSS code from Simple CSS plugin to Site Origin CSS plugin, then delete Simple CSS plugin?

Your assistance here will be appreciated.

Hello there,

Wishing you Happy New Year, too!

> 1

You don’t have to worry about it. They are all working.

> 2

You don’t need to merge it into one location. Although they are separated, all the output can be read by the web browser. However, managing stylesheet in one place will be much easier. So, it is up to you; you can do which one the most preferable.

Regards,
Kharis

Dear Kharis,

Thank you for giving your feedback.

  1. So we prefer as you suggested, to keep all changes in one place.
  2. If we choose Site Origin CSS, should we simply copy and paste all CSS codes from Simple CSS?
  3. Or is there a more professional way to import/export those codes?
  4. And finally, how can we back up those CSS codes from Simple CSS. Just in case if anything goes wrong with the site?

Thank you in advance for your kind assistance.

And I tried the new CSS code you just provided, it does not work on our mobile.
@media only screen and (max-width:320px){

.woocommerce-page table.cart #coupon_code {
width: 100% !important;
margin-bottom: 8px;
}

.woocommerce-page table.cart input[name=“apply_coupon”]{
width: 100% !important;
}

.woocommerce-page a.checkout-button{
font-size: 14px !important;
}

}

Dear Magna,

> 2) If we choose Site Origin CSS, should we simply copy and paste all CSS codes from Simple CSS?

Yes

> 3) Or is there a more professional way to import/export those codes?

There is no other easier way than manually copy and paste.

> 4) And finally, how can we back up those CSS codes from Simple CSS. Just in case if anything goes wrong with the site?

Copy all of the code into your text editor program and save in your drive.

> And I tried the new CSS code you just provided, it does not work on our mobile.

Please share your site’s URL, so I can take a closer look.

Regards,
Kharis

Thank you Kharis.

Is there a way to private message the URL, please

Sure. Email it to kharisblank@gmail.com, please.

Hello Kharis,

I have sent the email to you. Hope you have received it

Hello there,

Thank you for sharing the link to my email.

The code appears to be working fine as intended on my phone as seen on this screenshot.

Cloudup

Try to clear your mobile web browser’s cache and reload your site.

Regards,
Kharis

Thats very unusual.

I did as you mentioned, cleared the cache. Still no difference.

Android or Apple makes the difference?

What is your screen resolution? Visit this link to check.

Regards,
Kharis

My mobile screen is 360 x 640

Hello there,

Try to change the media query maximum screen width with 360px. So the code will look like this:


@media only screen and (max-width:360px){
  
  .woocommerce-page table.cart #coupon_code {
    width: 100% !important;
    margin-bottom: 8px;
  }  
  
  .woocommerce-page table.cart input[name="apply_coupon"]{
    width: 100% !important;
  }
  
  .woocommerce-page a.checkout-button{
    font-size: 14px !important;
  }
  
}

Regards,
Kharis

Thank you Kharis. Your above code works like a charm

You are the best.

Kind regards,
magna

You’re welcome and best wishes!

Regards,
Kharis

Kharis, you can close this ticket.