The website using WordPress WooCommerce and WP Touch is currently not appearing mobile-friendly. Additionally, there seems to be an issue with the carousel as the images are not displaying

Can someone help me with these issues I am facing on my website?

  1. Why does my CSS reset after using certain code?
  2. How can I make products show in the middle on mobile, other than on the homepage?

Website URL : (www.thevapeboys.co.uk)

I have a WordPress website with WooCommerce installed. To make it more mobile-friendly, I installed a plugin called WPtouch. I added specific CSS values to enhance the mobile experience.

This CSS script only activates when accessed from a mobile device. However, my issue is with a carousel on the website that lacks arrow indicators. I tried adding the following code to the CSS:

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

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

While it appeared as expected in Firebug, upon implementing the code, it resets all the previous CSS values. Is there a way to resolve this without affecting the existing CSS?

Furthermore, when visiting the shop page, the products and text are aligned to the left. How can I center them for a better mobile user experience?

csswordpresswoocommerce

Answer №1

  1. Regrettably, the custom css file is positioned first in the hierarchy, resulting in it never being able to override anything. CSS operates on a cascade system where the last duplicate class takes precedence, according to the browser. Place your custom css at the end for it to have the power to override.

  2. The WP Touch plugin may be unnecessary as your theme is already responsive; in fact, it seems to be duplicating the mobile menu, so disabling it would be wise. Proof of this can be found by searching for the "Responsive" description box here

  3. If you wish to replace the icons, follow these steps using your custom javascript file: 

    https://stackoverflow.com/questions/31605932/how-to-make-a-owl-carousel-with-arrows-instead-of-next-previous

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS Troubleshooting: Error in Outlining When Using Block Display

I am attempting to create a combobox using HTML and CSS where each item is displayed on a separate line and lights up blue when hovered over, similar to Google's design. The basic setup is simple. I have a div with links (a) inside, and each link is s ...

htmlcss

The text area within the input group is misaligned with the input group button

Here is an example of how I'm using the input group feature with Bootstrap: <div class="input-group" style="padding-left: 20px;"> <input type="text" name="s" class="form-control input-sm"> <span class="input-group-btn"> ...

htmlcsstwitter-bootstrap

What is the best way to create a highlighted navigation bar using Angular 2?

Is there a way to keep the navbar active even after refreshing the page in Angular 2? I am currently using CSS to accomplish this, but the active tab is removed upon page refresh. Any suggestions on how to tackle this? HTML:-- <ul class="nav navbar- ...

cssangulartypescript

How come the changes in my react component's CSS are not updating in real-time?

After integrating redux into my create-react-app project, I've been struggling to implement a navigator that highlights the active "page link." To achieve this functionality, I am using a combination of react hooks (to maintain the current page state) ...

cssreactjswebpacksassmaterial-ui

Switching images between mobile and desktop view in responsive mode is a useful feature for optimizing

Within a specific folder structure, I have a collection of images designated for both desktop and mobile displays: img: img-1.png img-2.png img-3.png img-4.png img-5.png img-6.png img/mobile: img-1.png img-2.png ...

imagecssresponsive-designsass

Issue with scrolling in angular-ui-bootstrap modal on Apple devices with the mobile web app capability enabled

I've encountered a problem with a basic to-do list web application that I'm currently developing. In order to enable the iPhone standalone launch feature, I have included the following code: <meta name="apple-mobile-web-app-capable" content=" ...

cssangularjstwitter-bootstrap-3angular-ui-bootstrapiphone-standalone-web-app

Creating a new project in ASP Net Core Angular using Bootstrap 4 for the SideMenu layout instead of Bootstrap 3

I am currently working on developing a website using Angular6, where I aim to have a vertical navbar for large screens and a top navbar with dropdown functionality for mobile devices. While searching online, I came across several examples that seemed overl ...

htmlcssangulartwitter-bootstrap

Unable to use column formatting on a row using flexbox

I am working on creating a layout with rows and columns where the content in each column is vertically aligned. Here is an example of what I am trying to achieve: Currently, I am using react and have multiple components. The approach I believe will work ...

cssreactjsflexboxrowmultiple-columns

Simple steps to generate a static header in list view on asp.net

I'm struggling to keep my header fixed while scrolling and can't seem to figure it out. Below is my ListView Code: <asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="FormSectionSubSectionItemRelID" OnSele ...

cssasp.netlistview

Customize button appearance within mat-menu in Angular versions 2 and above

Is there a way to style my mat-menu to function similar to a modal dialog? I am having difficulty with the styling aspect and need advice on how to move the save and reset buttons to the right while creating space between them. I have attempted to apply st ...

cssangularangular-materialstyles

Is it possible to incorporate a WordPress blog into an Angular JS site?

I recently heard from an acquaintance who is a nutritionist that the company who designed her website claimed that integrating WordPress into an angular js site is not feasible. Personally, I have experience working with jQuery, Java, and HTML, so I find i ...

angularjswordpress

Transforming external JavaScript and CSS scripts into HTML code

I am attempting to consolidate an external JS file and CSS file into a single HTML file by incorporating them internally in the HTML. While the CSS is functioning correctly with the style tag, the JS file seems to be causing some issues. What adjustments ...

javascripthtmlcss

When a div is floated to the right, it can lead to unexpected outcomes

Here is the code structure in the JSfiddle link below. When I apply float:right to the "Add" text, it creates extra space above the "Quick Links" & "Top 20 Sites" sections. #home-content { padding: 5px; } #home-content .css-table #row1-col3 .col-body { ...

htmlcss

Issue with child div exceeding 100% height within CSS Flexbox causing inconsistency in Firefox and Chrome browsers

I am facing a challenge trying to make a div resize to match its parent's height using flexbox. This issue seems to occur only in Chrome (48), as it displays correctly in Firefox (44). You can view the example on Fiddle: https://jsfiddle.net/jvilla/k ...

htmlcssflexbox

Interweaving jQuery scripts

After successfully implementing a form with jQuery, I decided to add a date picker using another jQuery code. Unfortunately, the two codes clashed and now they do not work together. Here is the initial jQuery code for the form: <!doctype html> <h ...

javascriptjqueryhtmlcss

iPad screen not displaying overflow for x and y axis

I'm encountering an issue with displaying the scrollbar on a div while using an iPad device. Currently, I am utilizing: -webkit-overflow-scrolling: touch; Although this is functioning properly, my goal is to have the scrollbar visible without the ...

jqueryhtmlioscssoverflow

Retrieve information from both the user_meta table in WordPress MySQL and my custom table

My database includes a custom table called "orders" where I store order information. | id | user_id | product To retrieve data from this table, I use the following code: $orders = $wpdb->get_results( " SELECT * FROM sbgf_pl_orders ORDER ...

phpmysqlsqlwordpress

What is the best way to eliminate the default background color applied to the body automatically?

I'm currently developing a Covid-19 tracking web application and I am using chartJS to showcase data from an API. In my CSS, I have assigned a background color to all elements with an asterisk (*), but for some reason there are empty spaces around the ...

javascriptcsschart.js

Issue with font-size changes using css variables in Angular not updating in browser for specific fields

Utilizing CSS variables, I have implemented a feature that allows users to adjust the font size to small, medium, or large. While this functionality works correctly for most fields, there are certain instances where the value is applied but not displayed. ...

htmlcssangulartypescriptcss-variables

The icon representing a clock from the font-awesome library is not displaying properly on my website

I've been tasked with creating the webpage below However, when I try to use the font-awesome class to include the clock icon as shown in the image, it's not displaying correctly. Here is the code I'm using. Can anyone point out my mistake? ...

htmlcssbootstrap-4