Return to previous page

Mobile Display of Product - by yohantosadu

This topic has 22 replies, 2 voices, and was last updated 6 years, 9 months ago ago by Rose Tyler

yohantosadu

Participant

February 23, 2018 at 11:16

here I attach the custom css mobile changes that have been done:
——————————————————————————————
.mobile-nav-heading, .et-mobile-menu li a, .mobile-nav .links li a{color: #fff;}

.products-grid .product {
width: 33.33% !important;
}
.row-count-3 .product:nth-child(2n+1), .home .row-count-4 .product:nth-child(2n+1){
clear: none !important;
}

.products-loop.products-grid {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
float:left;
}
.products-loop.products-grid .product {
position: relative;
padding-bottom: 35px;
}
.products-loop.products-grid .add_to_cart_button {
position: absolute;
left: 3px;
bottom: 0;
}
.products-loop.products-grid .product .price,
.products-loop.products-grid .product del {
font-size: 14px !important;
}
.products-loop.products-grid .product .add_to_cart_button {
padding: 5px;
}

————————————————————————————-

current mobile display:

http://prntscr.com/iinzbb
help me to tidy up this

#186102 Copied Theme version: WOOPRESSv 3.3 WooCommerce version: Version 4.9.2

21 Answers

Rose Tyler

Support staff

February 23, 2018 at 13:36

Hello,

Please create an empty dynamic.css file in woopress-child theme folder and set permissions 777 for the file + add wp_enqueue_style( 'dynamic-css', get_stylesheet_directory_uri() . '/dynamic.css' ); in woopress-child/functions.php file. Then go to Theme Options and re-save them.

Also, please do not update woocommerce plugin, if in changelog http://prntscr.com/iipivw you do not see the compatibility https://themeforest.net/item/woopress-responsive-ecommerce-wordpress-theme/9751050?s_rank=5
We will release a new theme version, that will be compatible with WC 3.3.3 v, soon.

Regards

#186119 Copied

yohantosadu

Participant

February 23, 2018 at 13:46

where is woopress-child theme folder ?

can i give you cpanel access ?

#186121 Copied

Rose Tyler

Support staff

February 23, 2018 at 13:52

Hello,

This changes should do users who use a child theme. Please check in Appearance > Themes if the child theme activated on your site. Woopress-child theme folder you may find in wp-content/themes folder. If you need help with this, provide us with FTP access.

Regards

#186122 Copied

yohantosadu

Participant

February 23, 2018 at 14:06

I feel too much custom css done, so as not to confuse my attach wordpress and cpanel access for easier in the examination

Please, contact administrator
for this information.

#186126 Copied

Rose Tyler

Support staff

February 23, 2018 at 14:21

Hello,

You do not use child theme, so you do not need to create dynamic.css file.
I’ve made some change in Theme Options > Custom css. Please check your site now.

Regards

#186129 Copied

yohantosadu

Participant

February 23, 2018 at 14:31

okay, add to chart already middle
how about
1. quick view https://prnt.sc/iio136 ?

#186133 Copied

Rose Tyler

Support staff

February 23, 2018 at 14:41

Hello,

Please check now.

Regards

#186137 Copied

yohantosadu

Participant

February 23, 2018 at 14:48

i checked and tried to clear cahe. but there has been no change,the text atill black

i am click this button
http://prntscr.com/iiqhu9
result (text still black):
http://prntscr.com/iiqgmn

#186138 Copied

Rose Tyler

Support staff

February 23, 2018 at 15:14

Please see this screenshot http://prntscr.com/iiqtx6 if you got another result likely this is effect of cache, please try to check this using another device or incognito browser window.

Regards

#186143 Copied

yohantosadu

Participant

February 23, 2018 at 15:42

okay fix..

we return to the mobile view
discount and sale label not show at mobile view and add to cart label button crash
http://prntscr.com/iir7lf

I want to look neat like this
http://prntscr.com/iir77r

#186148 Copied
Rose Tyler

Support staff

February 23, 2018 at 16:12
You may use this code in Theme Options > Custom css > Custom css for mobile:
```
.products-grid .product .add_to_cart_button {
    white-space: pre-wrap;
    border-width:  1px;
}
.product-content-image .label-product {
    display:  block;
}
.label-product > div {
    font-size: 6px !important;
    top: 3px;
    border: 1px solid rgba(22, 19, 19, 0.9);
    background-color: #f6f2f2ab;
    color: rgba(22, 19, 19, 0.9);
    width: 51px;
    height: 52px;
}

.type-label-1 {
    right: 0px;
}
.type-label-2 {
    left: 0;
}
.type-label-1 .new, .type-label-2 .sale {
    margin-top: 16px;
    font-size: 11px;
    font-weight: 600;
}
```
Regards
#186154 Copied
yohantosadu

Participant

February 23, 2018 at 16:31

Do I need to uncover the following code that already exists? and replace with the code above?

CODE BELOW ALREADY EXIST:
———————————————-
.mobile-nav-heading, .et-mobile-menu li a, .mobile-nav .links li a{color: #fff;}

.products-grid .product {
width: 33.33% !important;
}
.row-count-3 .product:nth-child(2n+1), .home .row-count-4 .product:nth-child(2n+1){
clear: none !important;
}

.products-loop.products-grid {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
float:left;
}
.products-loop.products-grid .product {
position: relative;
padding-bottom: 35px;
}
.products-loop.products-grid .add_to_cart_button {
position: absolute;
left: 3px;
bottom: 0;
}
.products-loop.products-grid .product .price,
.products-loop.products-grid .product del {
font-size: 14px !important;
}
.products-loop.products-grid .product .add_to_cart_button {
padding: 5px;
}

#186157 Copied

Rose Tyler

Support staff

February 23, 2018 at 16:42

Simply add the code on the bottom of code in “Custom css for mobile” field.

Regards

#186158 Copied

yohantosadu

Participant

February 23, 2018 at 16:52

I have added, but nothing changes

http://prntscr.com/iis5cz

#186161 Copied

Rose Tyler

Support staff

February 23, 2018 at 17:05

Did you clear cache? http://prntscr.com/iisbzw

Regards

#186166 Copied

yohantosadu

Participant

February 23, 2018 at 17:14

oh oke fix.(after delete cache, i am apologize for that, because iam forgot to delete cache).
and after update themes my menu at mobile view like this (all text black):
http://prntscr.com/iisf58

iwant like this (white text)
http://prntscr.com/iisfvn

#186170 Copied

Rose Tyler

Support staff

February 23, 2018 at 17:35

Please change this code in Custom css http://prntscr.com/iisqav
to
.mobile-nav-heading, .et-mobile-menu li a, .mobile-nav .links li a{color: #fff !important;}

Regards

#186176 Copied

yohantosadu

Participant

February 23, 2018 at 17:46

okay fix.

and help me to chane only now product at front page
from 2 colom to 3 folom
and fix add to chart not crash
http://prntscr.com/iisv11

#186179 Copied
Rose Tyler

Support staff

February 26, 2018 at 08:52
Hello,

Please find this code in custom css http://prntscr.com/ijt52z and change to:
```
.products-grid .product .add_to_cart_button, .product-slide .etheme_add_to_cart_button {
    white-space: pre-wrap;
    border-width: 1px;
}
```
Regards
#186264 Copied
yohantosadu

Participant

February 26, 2018 at 13:20

okay fix. thank you very much for Great Support.

#186330 Copied

Rose Tyler

Support staff

February 26, 2018 at 13:25

You’re welcome!
Have a nice day.

Regards

#186331 Copied
Viewing 22 results - 1 through 22 (of 22 total)