To add a new message section under the “Order Summary” and “Promo Code” section on the checkout page. This message will provide a contact number for customers to call in case they face any issues during checkout. The message will always be displayed. Solution: Added a new help message section under <section id=”wizard-step-content-right”></section> to provide… Continue reading Add a Message Section on Checkout Page
Tag: CSS
Hide Content with an Expander
Adding an Expander The only changes required are to the template and Sass. First, you should start by creating a container element for your expander. This needs to contain two children: a ‘head’ element, which is what always shows and will trigger the expansion when clicked, and a ‘body’ element which is what shows when… Continue reading Hide Content with an Expander
CSS to set Loading symbol user responsive
To ensure Loading symbol covers the entire screen regardless of the user’s scroll position, you need to set the #loader‘s position to fixed instead of absolute #loader { /*…………*/ visibility: hidden; top: 0; left: 0; width: 100%; height: 100%; background-color: #ccc;… Continue reading CSS to set Loading symbol user responsive
Container Queries in CSS
Container Queries in CSS are a powerful feature that allows styles to be applied based on the size of a parent container rather than the viewport. This makes it possible to create responsive components that adapt to their immediate environment, enhancing modular design and making layouts more flexible and maintainable. Key Concepts of Container Queries… Continue reading Container Queries in CSS
Integrating Tailwind css with Vuejs
Tailwind CSS is a styling framework that we configure with front-end frameworks for better UI. We can easily use classes and styles using Tailwind as inline styles or classes. When it comes to integration, similar to any other application, integrating Tailwind with Vue.js is also easy and follows almost the same process. Here’s how it… Continue reading Integrating Tailwind css with Vuejs
How to hide the eye from a password input in MS Edge
To hide the default hide/show password input field in the MS edge we need to disappears by using css property . The ::ms-clear is working and removes the little x where the user can clear the input. But the ::ms-reveal isn’t working. input[type=”password”]::-ms-reveal, input[type=”password”]::-ms-clear { display: none; } and input::-ms-reveal, input::-ms-clear { display: none; }
Tailwind Media breakpoints
Max-width breakpoints /** @type {import(‘tailwindcss’).Config} */ module.exports = { theme: { screens: { ‘2xl’: {‘max’: ‘1535px’}, // => @media (max-width: 1535px) { … } ‘xl’: {‘max’: ‘1279px’}, // => @media (max-width: 1279px) { … } ‘lg’: {‘max’: ‘1023px’}, // => @media (max-width: 1023px) { … } ‘md’: {‘max’: ‘767px’}, // => @media (max-width: 767px) {… Continue reading Tailwind Media breakpoints
Curved end of border-bottom in CSS
Suppose i want a border-bottom to look like this: This is not possible within default borders, as border-radius controls the radius around the element, not a single border edge. In-order to achieve this, a pseudo element can be used. div { max-width:50vw; padding-bottom:25px; position:relative; } div:after { content:”; position:absolute; bottom:0; left:0; right:0; background:red; height:20px; border-radius:0… Continue reading Curved end of border-bottom in CSS
How to execute a header menu solely through CSS implementation
Showing example: No JS is required To create a responsive header menu using pure HTML and CSS, you can utilize CSS media queries to adjust the menu layout and styling based on the screen size. Below is an example of how you can implement a simple responsive header menu: HTML <!DOCTYPE html> <html lang=”en”> <head>… Continue reading How to execute a header menu solely through CSS implementation
Aligning Common Elements to the Bottom with a Simple CSS Technique
For Example: To position a button at the bottom of each column and make them appear on the same line, you can use CSS flexbox or CSS grid, depending on your layout structure. Here are examples using both approaches: HTML <div class=”container”> <div class=”column”> <!– Column content –> <button class=”bottom-button”>Button</button>… Continue reading Aligning Common Elements to the Bottom with a Simple CSS Technique