[afungusboyParticipant]

I need to reduce the font sizing to display correctly on a phone screen. Can I do this by percentage or do I need to specify the exact size? I’d like to do something like this but it doesn’t seem to work:

@media (max-width: 480px) {
 body, h1, .entry-content, h1.product_title.entry-title, p.price, .woocommerce-tabs h2 {
        font-size: 80% !important;
    }
}

Can the above be fixed to work? If not, what is the simplest and easiest way to achieve this?

[afungusboyParticipant]

This reply has been marked as private.

[DarshanaModerator]

Hi there,

Thanks for writing in! Can you try defining each of your required element’s CSS rules separately and see.

For example:

@media(max-width:480px){
  h1.product_title.entry-title::first-letter {
    font-size: 80%;
  }
  p.price, .woocommerce div.product .summary .price > .amount {
    font-size: 28px !important;
  }
  .woocommerce-tabs .x-nav-tabs > li > a {
    font-size: 16px;
  }
}

Let us know how it goes.
Thanks!

[afungusboyParticipant]

I’m having issues with having the changes apply over previous css changes I’ve made in the child theme style.css file. I thought the css at the bottom of the file will over ride what is at the top. Is this correct?

I probably need to change some of my previous css rules to be screen specific. How do I add a rule to change a font size for all screens except phone size?

[afungusboyParticipant]

Also the product thumbnail on the shop cart page is super tiny and needs to be larger. How to change this?

The checkout page has too much height for the input boxes and the phone field is too short to fit a phone number and the email label is not above the email field. How to change this?

[afungusboyParticipant]

Part of the issue of not seeing changes is that the page is loading ../wp-content/themes/x-child/style.css?ver=4.6.4 which is some sort of past saved version. How can I override this to see the current contents effecting the page? (I don’t have any caching plugins installed yet)

[FriechModerator]

Hi There,

In that case please clear (or deactivate for a while) any caching plugin or feature the site might have. If you feel the the style.css is not updating, try accessing it like this:

/wp-content/themes/x-child/style.css?ver=4.6.99

I check your child theme style.css file and saw syntax error, please look for this at line 57:

.x-main .widget ul li a:last-child { border: none; margin: 0

That block has no closing bracket [ } ].

More likely that is the reason why the custom CSS you added did not work.

Let us know how it goes.

Thanks.

[afungusboyParticipant]

Ok, I fixed the error and found a solution to the css cacheing.

How do I add a rule to change a font size for all screens except phone size?

Also the product thumbnail on the shop cart page is super tiny and needs to be larger. How to change this?

The checkout page has too much height for the input boxes and the phone field is too short to fit a phone number and the email label is not above the email field. How to change this?

[JoaoModerator]

Hi There,

To affect all devices but mobile you can use:

@media(min-width:480px){

font-size: 30px;

}

To make the size of the product image bigger on the cart page, please add the following code to Appereance > Customizer > Custom > CSS

.woocommerce .cart.shop_table .product-thumbnail img {
    width: 70%;
}

Please add the following code to Appereance > Customizer > Custom > CSS

.woocommerce-checkout form input[type="text"] {
max-height: 50px;
}

Hope it helps

Joao

[afungusboyParticipant]

I made the css change but the product thumbnail on the shop cart page is still super tiny and needs to be larger.
http://awesomescreenshot.com/0ac68jb809

[ChristopherModerator]

Hi there,

It works fine on desktop but a bit tiny on mobile.
Please update this code :

.woocommerce .cart.shop_table .product-thumbnail img {
    width: 70%;
}

To :

@media (max-width:767px){
.woocommerce .cart.shop_table .product-thumbnail img {
    width: 100%;
}
}

Hope it helps.

[afungusboyParticipant]

That only made it a tiny bit larger…still too small!

The code below gets the image to the size I would like but does not look good. I think the size of the td cell needs to be changed? How do I prevent the image overlaping the quantity field and how do I get the quantity moved lower so it is aligned with the image and total price?

  .woocommerce .cart.shop_table .product-thumbnail img {width: 160%; max-width:160%; }
    td.product-thumbnail, th.product-thumbnail {padding: 0; }

http://awesomescreenshot.com/04a68jhf36

[Rue NelModerator]

Hello There,

Thanks for updating in! To prevent the image from overlapping and move the quantity to be align with the others, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.woocommerce .cart.shop_table .product-thumbnail img {
    width: 100px !important;
    max-width: 50% !important;
}

.woocommerce .quantity, .woocommerce div.product .summary .variations {
    margin-bottom: 0 !important;
}

Hope this helps.

[afungusboyParticipant]

That doesn’t help at all…it makes the thumbnail tiny again!

How do I change the width of the table cells on the cart page? Specifically how to set the width of the td cell the image is in? See: http://awesomescreenshot.com/0c468kfp50

[JoaoModerator]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

Joao

[Author]

Posts