Return to previous page

ARROWS DON'T APPEAR ON MOBILE VERSION

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

Eprana

Participant

August 28, 2018 at 16:03

Hi friends.

The following happens to me:

Sometimes I show my products through your “products” option. I also make suggestions for other products that can be purchased, and I have also configured “related products” to appear.

In the PC I can move these products to the left or right by means of small arrows that appear on the sides when the number of products is greater than the columns that I want to show.

But these arrows do not appear on the mobile phone.
Although I have configured that there are “5 related products”, only 1 appears on the mobile phone, the user must slide with his finger to the left of the product, so that the next one appears.

But as these arrows don’t exist in the mobile, the user can’t know that there are actually 5 related products and believes that there is only the one that is shown on the screen. Believe that there is only one product suggested or related.
Only if by chance the user move the product to the left, he will know that there are more related products.

How can I make these arrows appear on my mobile too? it’s very important.

Thanks a lot.

#198576 Copied Theme version: 1.0 WooCommerce version: 4.9.7

19 Answers
Rose Tyler

Support staff

August 29, 2018 at 07:38
Hello,

Please try to add this code in Theme Options > Custom css or in style.css file of your child theme:

@media only screen and (max-width: 768px){ .carousel-area .owl-nav { display: block !important; } }

Regards
#198603 Copied
Eprana

Participant

September 10, 2018 at 10:18

Good morning, Rose.

It has not been solved. Maybe I explained wrong.

What I need is that in the Mobile version, 2 arrows appear on both sides of the carrousel of products, so that the user knows that if slide left or right with the arrows, will find more products.

If not, the user believes that there is only the product that is appearing on the screen.

¿Does the theme have that possibility?

#199219 Copied Theme version: 1.0 WooCommerce version: 4.9.7
Rose Tyler

Support staff

September 10, 2018 at 10:36
Hello,

Please change the previous code to:

@media only screen and (max-width: 768px){ .single-product .carousel-area .owl-nav { display: block !important; } }

Let me know the result.

Regards
#199223 Copied
Eprana

Participant

September 19, 2018 at 09:31

Hello Rose.

The carrousel works perfectly. What dosn’t shows on Mobile are the NAVIGATION ARROWS.

I have change the code, but the arrows on the mobile still don’t appear. I have tried both the Global Custom CSS option and the Custom CSS for mobile.
I’ve also tried in the style.css of the child-theme.

Is it implemented on woopress theme? If that option does not exist, as a suggestion I think it should come BY DEFAULT in the next version.

I think that today it is important that the navigation by mobile is perfectly optimized.

If my clients don’t see the navigation arrows in the carousel, they don’t continue visualizing the carousel because they don’t know that there are more products that can see (ALWAYS TALKING ABOUT THE MOBILE)

Is there a possibility that you can solve it for me?

#199654 Copied Theme version: 1.0 WooCommerce version: 4.9.7

Rose Tyler

Support staff

September 19, 2018 at 09:37

Hello,

From browser inspector, the code works fine https://gyazo.com/b1b0a609689dc09ec9b37fad0e5489c4 Is this what you are looking for? If so, please add the code via Theme Options and provide me temporary wp-admin access so I can check why it doesn’t work for you.

Regards

#199656 Copied

Eprana

Participant

September 20, 2018 at 09:10

Hello Rose

I was very surprised because you do get the arrows.

So I’ve asked three friends to check it on their cell-phones, and the arrows do not appear either.

I left the code written in the “global CSS otpions” box of Theme Options, but as I said, I also tried it by copying it in the “Custom CSS for mobile” box (theme options).

I give you my keys.

Thank you very much!

Ana

Please, contact administrator
for this information.

#199715 Copied Theme version: 1.0 WooCommerce version: 4.9.7

Rose Tyler

Support staff

September 20, 2018 at 09:21

Hello,

Please add this code in your child-theme/functions.php file:
wp_enqueue_style( 'dynamic-css', get_stylesheet_directory_uri() . '/dynamic.css' );
http://prntscr.com/kqreis after that create an empty dynamic.css file in child theme directory.
Then custom css from Theme Options will work fine.
In case it won’t get working, provide temporary FTP access and I will pass the problem to our developers.
Waiting for your reply.

Regards

#199716 Copied

Eprana

Participant

September 20, 2018 at 17:42

Hello Rose

One question … have you made any changes in my wordpress?

All the images on my website that link to my categories, among many other things, have disappeared.

And I have to resolve if it has been for some change or yours, or my Seo manager.

#199753 Copied Theme version: 1.0 WooCommerce version: 4.9.7

Rose Tyler

Support staff

September 21, 2018 at 07:01

Hello,

I did not make any changes on your site.

Regards

#199763 Copied

Eprana

Participant

September 21, 2018 at 07:58

Ok. Rose.

Thank you very much.

I will solve with my Seo Manager what has happened on my page and as soon as I have that resolved, I will return with this topic.

Have a good day.

#199772 Copied Theme version: 1.0 WooCommerce version: 4.9.7

Eprana

Participant

September 21, 2018 at 12:00

Hello Rose

We have already solved the prombla of my Web.

Then, let’s continue with the problem of the arrows’ carusel, on the mobile-phone.

I have followed all your instructions:

– I copied that line of code in the phuntions.php file of my child-theme.

– I created an empty dynamic.css file in the child-theme.

– I copied the code you gave me in the Custom CSS of the Theme Options (I have tried it both in Global Custom CSS, and in Custom CSS for mobile)

And the arrows still do not appear.

I’ve asked other friends … they do not come out either …

I give you the keys of my FTP acceso.

Thank you very much!!

Please, contact administrator
for this information.

#199780 Copied Theme version: 1.0 WooCommerce version: 4.9.7

Rose Tyler

Support staff

September 21, 2018 at 12:09

Hello,

Thanks for the reply.
Clear cache and check one more time https://prnt.sc/kx0hbr
The custom code needs to be added in the Global Custom css area.

Regards

#199781 Copied

Eprana

Participant

September 25, 2018 at 12:53

Hy Rose.

Let’s go through all the steps, because the arrows still do not appear on the phone-mobil.
We have tried several phones, cleaned the cache and none appear.

These are the steps I have followed from the beginning:
:

1.- I copied the line of code you gave me, in the phuntions.php file of my child-theme:

wp_enqueue_style( ‘dynamic-css’, get_stylesheet_directory_uri() . ‘/dynamic.css’ );

2.- – I created an empty dynamic.css file in the child-theme. (I gave you access to my cpanel, and now there is written this code:

/* BEGIN global_custom_css */
.et-mobile-menu li a {
color: #fff;
}
.main-footer.text-color-light .widget-title,
.main-footer.text-color-light .wpb_heading{border-bottom:1px solid #555;}
.posts-slider .meta-post {
display: none;

}
@media only screen and (max-width: 768px){
.single-product .carousel-area .owl-nav {
display: block !important;
}
}

/* END global_custom_css */
/* BEGIN custom_css_desktop */
@media(min-width: 992px){
.blog .sidebar,
.single-post .sidebar {
position: sticky;
top: 0;
right: 0;
}
.blog .fixNav-enabled .fixed-already + .container + .header-wrapper + .page-heading + .container .sidebar,
.single-post .fixNav-enabled .fixed-already + .container + .header-wrapper + .page-heading + .container .sidebar {
top: 150px;
}
}
/* END custom_css_desktop */

3.- – I copied the code you gave me in the Global Custom CSS of the Theme Options:

@media only screen and (max-width: 768px){
.single-product .carousel-area .owl-nav {
display: block !important;
}
}

I have deleted the cache in all the mobile phones where we have tried
but it’s still the same … there must be some failure!

#199913 Copied Theme version: 1.0 WooCommerce version: 4.9.7

Eprana

Participant

September 25, 2018 at 13:25

Rose! news!

the arrows appear in “related products” and in “suggestions” of the tab of each product!!!

BUT IN THE BOTTOM OF THE HOME PAGE I HAVE SEVERAL CAROUSELS:

(name in spanish)

“Artículos Yoga destacados”
“Artículos Meditación destacados”
“Bisutería, Decoración y Productos naturales destacados”

And that’s where the arrows of the mobile do not appear. Only in this carousels!

#199917 Copied Theme version: 1.0 WooCommerce version: 4.9.7
Rose Tyler

Support staff

September 25, 2018 at 13:32
Thanks for letting me know.
Please change this previous code:

@media only screen and (max-width: 768px){ .single-product .carousel-area .owl-nav { display: block !important; } }

to:

@media only screen and (max-width: 768px){ .carousel-area .productCarousel .owl-nav { display: block !important; } }

Regards
#199918 Copied
Eprana

Participant

September 25, 2018 at 16:29

Yes!! you have solved it!

It is incredible the good work you have done. You get involved, I felt safe and accompanied by you at all times! and you have also solved it!

For me it has been complicated, but with patience and confidence, we have done it.

Thank you very, very much!!!

#199938 Copied Theme version: 1.0 WooCommerce version: 4.9.7

Rose Tyler

Support staff

September 26, 2018 at 07:28

You’re welcome!
Thank you for using our theme.
Would you mind to rate our product: https://themeforest.net/downloads
That would be much appreciated 🙂
Have a nice day.

Regards

#199958 Copied

Eprana

Participant

September 26, 2018 at 08:36

Done!!

Thank you!

#199966 Copied Theme version: 1.0 WooCommerce version: 4.9.7

Rose Tyler

Support staff

September 26, 2018 at 08:38

Thank you very much for choosing our theme and for your kind words! 🙂

Regards

#199967 Copied
Viewing 20 results - 1 through 20 (of 20 total)