Return to previous page

Mobile View - by yohantosadu - on WordPress WooCommerce support

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

yohantosadu

Participant

March 2, 2018 at 16:27

1. how to separate the label new product and slider, because stacked
http://prntscr.com/ilwnlo

2. i want margin product picture:
http://prntscr.com/ilwpc4

3. pararallel align
http://prntscr.com/ilwqh8

4. show product, because in desktop view is a tab option.
http://prntscr.com/ilwr5u

#186991 Copied

18 Answers

yohantosadu

Participant

March 2, 2018 at 16:28

mobile view CSS which has existed

.mobile-nav-heading, .et-mobile-menu li a, .mobile-nav .links li a{color: #fff !important;}

.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;
}

.products-grid .product .add_to_cart_button, .product-slide .etheme_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;
}

#186992 Copied

yohantosadu

Participant

March 3, 2018 at 06:09

follow-up questions
5. how to hide Accordion Category (shop and product category) in mobile view ?
http://prntscr.com/im6500

#187047 Copied
Rose Tyler

Support staff

March 5, 2018 at 08:48
Hello,

1. You can use Empty space element and hide it on desktop https://prnt.sc/imz7vb, so it will be shown only on mobile.
2. Add this code in Custom css for mobile:

.products-grid .product-content-image img, .productCarousel .product-content-image img { margin-bottom: 10px; }

3. Add this code in Custom css for mobile:

.productCarousel .slide-item .progress-button { padding: 5px; white-space: pre-wrap; } .productCarousel .slide-item .product-title {min-height: 60px;}

4. This is the default behavior for the tabs element. Try to use other tabs.
5. Via Theme Options you can change “Sidebar position for responsive layout” (TO > Products Page Layout).
To hide categories, use this code in Custom css for mobile:

#woocommerce_product_categories-2 { display: none; }

Regards
#187113 Copied
yohantosadu

Participant

March 5, 2018 at 10:06

2. I’ve deleted the cache but there has been no change, the distance between product margins is still too wide.
I want the distance margin to be the same as add to chart
http://prntscr.com/in08sm
http://prntscr.com/in09oo
3. how to do label and discount label to be parallel to.
http://prntscr.com/in06cb

#187140 Copied

yohantosadu

Participant

March 5, 2018 at 11:57

1. You can use Empty space element and hide it on desktop https://prnt.sc/imz7vb, so it will be shown only on mobile.

I’ve tried adding the empt space element, but when I update, the empty space element disappears

#187156 Copied
Rose Tyler

Support staff

March 5, 2018 at 14:21
Add code in Custom css for mobile:
2.

.products-grid .product { padding-left: 2px; padding-right: 2px; }

3.

.products-grid .product-title { min-height: 80px; margin-bottom: 0px; }

1. Please provide temporary wp-admin access in Private Content.

Regards
#187179 Copied
yohantosadu

Participant

March 5, 2018 at 14:44

1. Please provide temporary wp-admin access in Private Content.

Please, contact administrator
for this information.

#187186 Copied

yohantosadu

Participant

March 5, 2018 at 15:18

and for some reason tawk.to and click to chat WA (plugin) canot show in home page. but can show in another page

#187201 Copied

Rose Tyler

Support staff

March 6, 2018 at 09:02

1. You added margin-top: -60px, that create the problem on mobile http://prntscr.com/ingwjz so simply delete this http://prntscr.com/ingwut

and for some reason tawk.to and click to chat WA (plugin) canot show in home page. but can show in another page

– please describe in more details, and provide some screenshots for better understanding.

Regards

#187281 Copied

yohantosadu

Participant

March 6, 2018 at 09:44

I tried changing this setting and doing the save update

http://prntscr.com/inhf80

but after I re-open, the settings are unchanged and the value -60px is fixed
http://prntscr.com/inhfuf

is there my way wrong wrongs

Please help

#187293 Copied

Rose Tyler

Support staff

March 6, 2018 at 11:46

You use a lot of 3-rd party plugins, so try to disable all these plugins and then check.

Regards

#187315 Copied

yohantosadu

Participant

March 6, 2018 at 12:12

okay, fix. thank you very much.
all problem solved.

thank you for Great Support

#187320 Copied

yohantosadu

Participant

March 6, 2018 at 12:23

discount and new label not showing at mobile view

http://prntscr.com/injk7r

how to tidy up the information label in footer for mobile view

http://prntscr.com/injkps

#187321 Copied
Rose Tyler

Support staff

March 6, 2018 at 13:36
1. https://www.8theme.com/topic/mobile-display-of-product/ – http://prntscr.com/inkizl
2. You need to remove this background image https://prnt.sc/inkkh2 and add this code in Global Custom css:

.main-footer { background-image: url(https://www.8theme.com/import/woopress/versions/wp-content/uploads/sites/4/2016/06/footer-bg-copy.jpg?id=15698) !important; background-size: cover; }

upload the image to media library and write url to this image on your site.

Regards
#187334 Copied
yohantosadu

Participant

March 6, 2018 at 18:22

1. I have included the script, but there has been no change.
before upgrading to 4.0 works well.
I tried to add “!important”
http://prntscr.com/inox5r

and the result:
http://prntscr.com/inoyex
only the color of the label becomes transparent.

2. now footer becomes more presentable, thank you.
how to make this part http://prntscr.com/inp0fk, like a demo http://prntscr.com/inp00b ?

3. I love liking tabs on demos http://prntscr.com/inp16u
tab option is right and left.
but a mobile view on my web http://prntscr.com/inp2i4
how to make the tab arrangement as in the demo, which is on the right and left ?

#187412 Copied
Rose Tyler

Support staff

March 7, 2018 at 11:50
1. Please see screenshot http://prntscr.com/io0737
+ change this code

.type-label-1 .new, .type-label-2 .sale { margin-top: 16px; font-size: 11px; font-weight: 600; }

to

.type-label-1 .new, .type-label-2 .sale { margin-top: 16px !important; font-size: 11px !important; font-weight: 600 !important; }

2. Please change the previouse code to this one http://prntscr.com/io099p
3. Looks like on our demo using another tabs element.

Regards
#187492 Copied
yohantosadu

Participant

March 8, 2018 at 10:27

1. I have added the script, and the result http://prntscr.com/iofdet
label colors are not the same when viewed with desktop view http://prntscr.com/iofcrs
how to new and discount label color between desktop view and mobile view be the same
2. Problem Solved, Thank You very much,
3. the tab view on the desktop menu is the same as the demo.
In contrast to the mobile display,
(tab)8theme demo desktop view: http://prntscr.com/iofa3o and mobile view : http://prntscr.com/inp16u
(tab)kinghardware demo desktop view:http://prntscr.com/iofaee and mobile view: http://prntscr.com/inp2i4

looks like the same tab model
the difference is when it opens in mobile view
when different types of tabs are used on the demo website?

#187594 Copied

Rose Tyler

Support staff

March 9, 2018 at 10:50

1. Change this code http://prntscr.com/iotxta to https://prnt.sc/ioty0e
2. You’re welcome!
3. http://prntscr.com/iotzis > please check “test tabs” page on your site.

Regards

#187675 Copied
Viewing 19 results - 1 through 19 (of 19 total)