0

I have 2 questions

  1. how come does my css resets after using certain css code?
  2. how come products other then on homepage is not showing in the middle on mobile

website url : (www.thevapeboys.co.uk)

I have a wordpress website with woocommerce installed I wanted to make mobile friendly so I installed a plugin called wptouch, I have added certain css values to it to make it more mobile friendly these are

these css script only triggers when someone from a mobile goes on the website

but the problem is I have carousal on the website which has next/preview and it dosent show the arrows for it so I tried adding this code to the css 

.owl-nav .owl-next::before {
content: ">";
}

.owl-nav div::before {
content: "<";
}

I tried it with firebug and it looked all friendly but when i actually put the code in it resets all the other css values that i did before.is there a way it works without resetting the other css values because it works with firebug

when I go on shop the products and the font is coming on the left now i m not sure how to make them position all of them in the middle so it could be more mobile friendly.

abpatil
  • 916
  • 16
  • 20
phpform10 asd
  • 1
  • 1
  • 6

1 Answers1

0

  1. Unfortunately the custom css file is first in line, which means it won't ever override anything. CSS works with a cascade meaning the last duplicate class wins out, according the browser. Put your custom css last and it will override.

  2. You shouldn't need the WP Touch plugin as your theme is already responsive, in fact it's duplicating the mobile menu so I'd turn it off. https://woocommerce.com/storefront/ (search for the "Responsive" description box for proof of this)

  3. Do the following to replace the icons, you need access to your custom javascript file: https://stackoverflow.com/questions/31605932/how-to-make-a-owl-carousel-with-arrows-instead-of-next-previous

Community
  • 1
  • 1
Nathaniel Flick
  • 2,902
  • 2
  • 22
  • 31
  • first of all thank you for your reply and efforts 1.the css i put it in it was overriding but only the above code which i put it in makes all of them reset 2. i know but wp touch makes it look more good i tried without it 3. do i just copy and paste the code from the link. – phpform10 asd Jan 06 '17 at 17:01
  • #2 you need to fix the responsive issue rather than use WP Touch plugin; it's making things worse. #3 you need to put that javascript into your theme's custom js file for it to replace the owl slider arrows; but first check your OwlSlider has an option for this in WP Settings. – Nathaniel Flick Jan 06 '17 at 18:36
  • If you only want to reset the arrows on one page then use that page's unique body class. For example the blog page gets a class like "blog" or "blog-page". – Nathaniel Flick Jan 06 '17 at 18:37