Implementing a dual-column design for MailChimp using HTML and CSS

I'm feeling overwhelmed. I have a MailChimp layout that I exported from MailChimp. Currently, the layout consists of 3 columns, but on mobile, it converts to 1 column. Here is the link to the codepen: goo.gl/Fj8Ct7

Is there anyone who can assist me in changing it to a 2-column layout in mobile view? https://i.sstatic.net/QtsaE.jpg

I'm really stuck in a tough situation.

Regards, Mike

Answer №1

Consider updating the .columnWrapper in your css file by changing the max-width: 480px to have width set to 50% instead of 100%

@media only screen and (max-width: 480px){
        .columnWrapper{
            max-width:50% !important;
            width:50% !important;
}

FINAL OUTPUT

https://i.sstatic.net/9KWNF.png

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

Learning how to track mouse wheel scrolling using jQuery

Is there a way to track mouse scrolling using jquery or javascript? I want the initial value to be 0 and increment by 1 when scrolling down and decrement by 1 when scrolling up. The value should always be positive. For example, if I scroll down twice, the ...

Automatically switch to the designated tab depending on the URL

Is it possible to automatically activate a specific tab based on the URL structure if my tabs are configured in this way? I am looking for a solution where a link on www.example1.com/notabs.html will redirect to www.example2.com/tabs.html This particular ...

The progress bar for uploading a file is causing issues with the redirect function in the

I am currently facing an issue with my file submission form and progress bar in JavaScript. The progress bar is interfering with the controller, preventing it from redirecting back home with the link. I have tried removing window.location.href="/"; but thi ...

Using html as a template parameter in django

When passing HTML to my template, I am using the following code: passDict["problemText"] = <p> Some html</p> return render(response,'main/base.html',passDict). However, when trying to display {{problemText}} in my HTML file, I only se ...

Ways to display the modal once the user initiates the action

Is there a way to delay loading my modal HTML codes until after the user clicks a button, rather than having them load automatically with the template? HTML <!-- Template Codes--> <button data-toggle="modal" data-target="#modal-content" type="bu ...

What is the correct way to make an image adjust to changes in a browser's size?

I'm in a bit of a quandary: How can I ensure that an image resizes properly based on viewport size? So, here's the challenge - I have an image that is 400 pixels wide and 400 pixels tall. My aim is for it to occupy only 90% of the width of the v ...

What steps can be taken to prevent a "Flash of Unstyled Content" when using fixed-width cells in CSS Tables?

My website's design is heavily influenced by CSS tables. This decision was made to ensure consistent cell heights regardless of the content, making alignment easier. Overall, this method has been quite effective. However, there is an issue where the ...

Items seem to vanish into thin air and become immovable when attempting to relocate them

I am attempting to create a unique grid layout with 3x3 dimensions, where each grid item represents a fragment of a single image. These items should have the capability to be dragged and dropped inside another 3x3 grid, in any desired sequence. I have hit ...

Attempting to transmit multiple variables

Can anyone provide assistance with passing multiple variables from one page to another? I am able to pass a single variable, but I need to send more than one by clicking a link. Below is a snippet of my code containing the rows I want to transmit to the ne ...

Attempting to align input fields and spans side by side

Is there a way to properly align multiple inputs next to each other with dots in between, resembling an IPv4 address? Currently, the span appears to float in the center. How can this be resolved? It's worth noting that all elements in the image have b ...

What is the best way to create a navbar with a grid that spans the full height and includes two rows

My approach to structuring the layout using CSS grid is as follows: nav content nav footer This means that the 'nav' will occupy the entire height of the page with a specified width, and the remaining space will be divided between the 'cont ...

Strategies for managing a situation where a class is called during runtime

Can anyone assist me with an Angular issue? I am trying to dynamically add the abc class when the show class is present, and remove the abc class when the show class is hidden. I am working with Angular 6 and my current conditions are as follows. Any help ...

Website Responsiveness - inquiries for all needs

My first responsive website project has hit a roadblock, as I struggle to understand how to implement media queries effectively. Here's a snippet of my code... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x ...

Adjusting the size of the div both horizontally and vertically in Angular 5 using the mouse cursor

As a beginner in Angular 5, I am looking to achieve horizontal and vertical resizing of a div by dragging with the mouse pointer. Can someone assist me in implementing this feature? ...

Is it possible to utilize AngularJS ngAnimate to perform cross-fading transitions on list items?

I am currently exploring the ins and outs of angularJS with my simple message ticker example. This ticker displays messages by toggling the CSS display property of one of the li elements. <div id="ngtickerMessage" class="ngtickerMessage"> ...

Alter the app's entire background color in React.js with a button click

I am facing an issue with changing the background color of my entire React App when a button is clicked. Currently, I am able to change the color of the button itself but not the background. I have imported the App.css file into my project and I am looking ...

The drop-down menu does not maintain its selected option after the window is refreshed

I am struggling with a dropdown list as shown below: <select class="span2" id ="sort" name= "order_by"> <option >Default</option> <option >Price</option> <option >Color</option> ...

Positioning the <div> to the left of a sidebar

I regret to inform you that I am unable to provide an answer at this time. Below is the code snippet provided: #wrapper { width: 844px; display: block; margin-left: auto; margin-right: auto; text-align: left; } #posts { width: 844px; float: left; } .en ...

Switching the WordPress dropdown menu from a hover function to a click function

Is it possible to modify the WordPress menu dropdown behavior from hover to onclick? I want the menu to appear when an item is clicked, but WordPress currently requires hovering. Below is what I've tried so far, but it has not been successful. Jquery ...

Static list elements are utilized in the CSS drop-down menu

It may appear that my coding skills are lacking or incorrect. When I attempt to create a drop-down menu in CSS, the new list elements end up on the other side of the page instead of within the container box. How can this be fixed? Below is the code snippe ...