Mobile display issue with short description

Support
#1

Hello, I have a problem with the mobile view of the woocommerce single product. it is shifted to the right.

Can you help me?

#2

Hi @mopet38,

There might be a custom CSS that shifts the product info to the right on mobile devices. As this is a site specific case, is there a chance that you can provide us with the URL of the site in question so that we can check it and provide you with some suggestions?

Thank you.

#3

Hi @mopet38,

That is because of this CSS that you have added to your site:

.woocommerce div.product .summary {
    float: right;
    clear: right;
    width: 48%;
    line-height: 1.3;
    font-size: 18px;
    font-family: inherit;
}

It forces the product summary area to be 48% of the screen width including on mobile.

To solve that, please add this code as well:

@media (max-width: 767px) {
    .woocommerce div.product .summary {
        width: 100%;
    }
}

Here are some related links for further reading:

Hope this helps.

#4

Thank you!

#5

You are most welcome. :slight_smile:

#6

One more question? Can I fix footer with css too?

#7

Hi There @mopet38

Your footer sections are currently displaying as follows.

Do you want to center it ? If so, first you need to assign a unique class into your Columns (Column -> Customize). For example, my-mobile-center.

Then you can add the following CSS rule into your X -> Theme Options -> CSS area.

@media (max-width: 767px) {
    .my-mobile-center {
        text-align: center;
    }
}

Please use our CSS rules as a guideline and add your own customization rules accordingly.

Thanks!

#8

You and your suport are fantastic. One more thing happen. How could I hide this worning on last page woocommerces shop:
Warning: Division by zero in /home/konobi36/public_html/wp-content/plugins/reward-points-pro-for-woocommerce/includes/checkout/phoen_reward_checkout_message.php on line 94

#9

Hi @mopet38,

To hide it, you can edit your wp-config.php file located at the root directory of your site.

Find WP_Debug and set it to false.

define('WP_DEBUG', FALSE);

Hope this helps

#10

Hi that is allready set. Anything else?

#11

Hi @mopet38,

The message you are getting is a PHP warning/debug message that should be disabled with you do what @paul.r suggested.

But based on the message, it is caused by the reward-points-pro-for-woocommerce so it would be best to get in touch with the plugin author for this.

Hope this helps.

#12

thank you I will.

#13

You are most welcome!

#14

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.