Layout Optimized for Mobile Devices with a Single Column Structure

I've been working on optimizing our website for mobile devices, but I'm facing an issue with the formatting. When the browser is scaled down to mobile size, the columns appear offset and spaced unevenly. What I really want is to have all elements aligned neatly in a single column when viewed on mobile devices.

Just to clarify, my focus is only on making these changes for the mobile version of the site. I'm satisfied with how the tablet and desktop versions look.

We're currently using Visual Composer and Go Pricing as plugins.

This is the code snippet I used to align the pricing tables for the desktop layout:

<div style="max-width: 400px; margin: 0 auto;">[go_pricing id="multicam_productions"]</div>

You can visit our website here:

For reference, here's a screenshot illustrating the issue:

csswordpress

Answer №1

The div labeled "What Service" is currently using a class of .vc_custom_1410664290855 which includes the property margin-left: 10% !important;. This margin setting is what's causing the misalignment seen in the screenshot you provided.

To fix this issue, consider removing the specified margin by implementing a media query at the relevant screen size.

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

What is the best way to make SVGs of varying sizes appear uniform in height?

I am encountering an issue with a RestAPI that provides SVG images of different sizes. While some images fit perfectly, others do not. You can check the examples using this link: https://i.sstatic.net/XJwKU.png The main challenge is that I do not have inf ...

htmlcssimagesvg

SASS fails to recognize the variable

I am trying to incorporate borders based on specific @media breakpoints. Here is the code I have written: @media(max-width:767px) { $height: auto; $grid: 1; } @media(min-width: 768px) and (max-width:991px) { $height: 370px; $grid: 2; } @media(min-width: 9 ...

csssass

What methods are available to modify styles for the before and after pseudo-elements in Angular?

I'm currently in the process of adding breadcrumb navigation with triangle shapes using before/after elements in CSS, following the method outlined in this tutorial: http://css-tricks.com/triangle-breadcrumbs/ These are the relevant code snippets: ...

javascriptjqueryhtmlcssangularjs

Enhancing your JQuery Select2 plugin by incorporating a Checkbox feature

I am currently utilizing the jQuery select2 plugin to enable multiple selections. My goal is to incorporate a checkbox for each selectable option. Depending on whether the checkbox is checked or unchecked, the dropdown option should be selected accordingl ...

javascriptjqueryhtmlcssjquery-select2

JQuery calculator experiencing issues with data-numbers functionality| Troubleshooting allclear button functionality

Need help with AC button functionality and deleting button I am currently working on creating a calculator from scratch using Jquery. However, I am facing difficulties getting the calculate function to work. Despite my attempts at experimenting with javas ...

javascriptjqueryhtmlcss

Using display:inline-block will increase the vertical spacing

I am currently dealing with the following HTML and CSS setup: * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { margin: 0; } .row { background-color: red; /* display: inline-block; */ } ul { ...

htmlcsspadding

Gradient that runs in a straight line from opposite ends

Is there a way to apply linear gradients from both the top and bottom to create smoother lines when text is scrolled? I was able to achieve a linear gradient at the bottom using this code: <div className="vsebina" style={{WebkitMaskImage:&apo ...

css

Modify the CSS using JavaScript after a brief delay

I'm creating a homepage that includes animations. Inside a div, I initially have display: none, but I want it to change to display: block after a few seconds. I've been trying to use JavaScript for this purpose, but I'm struggling to find th ...

javascriptcss

Is it possible to reposition a placeholder?

Looking for help with adjusting the placement of a placeholder text in my code: <div class="txt-input"> <input id="txt-enter" type="text" placeholder="Enter To-Do"> </div> The placeholder is curren ...

htmlcssplaceholder

What is the best method to incorporate JavaScript into all pages of a website?

Interested in incorporating "Google Analytics" on your website? I just finished configuring my Google Analytics, but the final step is to insert the tracking code into every page I want to track. The code provided is: <script> (function(i,s,o,g,r ...

phpwordpressgoogle-analytics

Tips for creating a dynamic text that adjusts to different screen sizes within a bootstrap button

When utilizing the w3.css and bootstrap libraries to add a link button, an issue arises when resizing the screen as the text inside the button does not respond accordingly. How can we ensure that the text fits within the button based on the screen resoluti ...

htmlcsstwitter-bootstrapbuttonresponsive

Adjusting input height with CSS in Google Chrome

When I define an input element with the following CSS properties: input { border: none; font-family: arial, sans-serif; font-size: 16px; line-height: 16px; padding: 0; } I anticipate the height of the input to be 16px, however, upon inspecting ...

htmlcssgoogle-chrome

Aligning the Navigation Bar to the Upper Right Corner

I'm attempting to rearrange my Nav Bar to be at the Top Right, with my logo on the Top Left all in one line. Unfortunately, I'm struggling to achieve this and could really use some guidance. As a newcomer to HTML and CSS, I find it challenging to ...

htmlcss

Tips on adjusting the position of an icon within a dropdown list in HTML?

I have a search field on my webpage with an icon inside it. I managed to find some sample code for the icon. https://i.sstatic.net/WUOot.png However, I am struggling to position the icon to the right of the search box. I've tried adjusting the styli ...

csshtml

Issues with the play() method in Javascript across Firefox, Safari, and IE 11 are causing functionality problems

I developed a basic video and audio player that smoothly fades out an introductory image and starts or stops playing an mp4 file upon click. Everything functions properly in Chrome, but unfortunately does not work in other major browsers. Despite checking ...

javascriptjqueryhtmlcss

Enhance the functionality of Woocommerce email notifications by incorporating a customized VAT field

I have exhausted all options and tried various email hooks without success. I inherited an outdated PHP code that was developed by someone else, which I updated for new woocommerce hooks (since the code is 4 years old). Everything is functioning smoothly e ...

javascriptphphtmlwordpresswoocommerce

What is preventing HTML from triggering JavaScript when loaded inside a <div> with a script?

I'm working on creating a collapsible menu that I can easily customize on any page without the use of iframes. As someone new to web design, I have knowledge of CSS and HTML but I am currently learning JavaScript with limited experience in jQuery or A ...

javascripthtmlcss

Modify the color of certain terms within the input field

I'm currently working on an editor for Cucumber feature files. As I write step definitions, I'd like the keywords Given, When, Then, etc. to appear in blue text, and any text between < > brackets to show up in red. Is there a way to change ...

htmlcssangularjs

Ways to bypass a customized CSS element and opt for the original one under specific circumstances

I have a customized Bootstrap file that alters certain components, however, I am encountering issues with it especially when transitioning to Bootstrap 4. The problem arises in specific scenarios and I would like to revert back to using the original Bootst ...

htmlcssbootstrap-4carousel

The rendering of the font appears distinct when viewed on an iPad compared to when displayed

Visit this website. The menu displays correctly on desktop, but on iPads, the font appears larger leading to a line break. Is it because the selected font isn't loading and defaulting to Times New Roman instead? It seems likely since I experience the ...

htmlcssfonts