Responsive column display on mobile devices can be optimized by configuring columns to appear in a 2x3 or 1x6 layout. This can be achieved even with

Currently utilizing the Avada Fusion Theme, my ability to edit core theme HTML files is limited.

Fortunately, I do have access to Custom CSS.

The challenge I am facing involves adjusting the display of the columns to appear as 2x3 instead of 1x6 on mobile devices with a screen size under 800px:

See IMAGE for visual reference

To view the issue in action (dated June 20th, 2017), please visit the following page and switch to mobile view:

Visit https://zeralynx.co.uk

Below is the snippet of CSS code that I'm using; note that all 6 columns share the same ID selector "home-product-tiles":

@media only screen and (max-width: 800px) {
#home-product-tiles {
    width: 47% !important;
    display: inline !important;
    float: left !important;
    margin-right: 2% !important;
    overflow: hidden !important;
}
}

The issue lies in the fact that the 4th column (initially the first in the second row on desktop view) fails to align properly next to the 3rd column (last in the first row on desktop view).

Your assistance in resolving this matter would be greatly appreciated. I believe it's a simple fix!

Sincerely, Zach

htmlcsswoocommerceresponsive

Answer №1

One reason for this issue is the unequal height of your columns. It's also not recommended to use both display:inline and float:left as they achieve similar results.

To fix the column height discrepancy, you can utilize display:flex. Check out the code snippet below for an example:

wrapper {
  display: flex;
  flex-wrap: wrap;
}

div {
  float: left;
  width: 49%;
  margin-right: 2%;
  display: inline;
}

div:nth-child(even) {
  margin-right: 0;
}
<wrapper>
  <div>
    <img src="http://via.placeholder.com/350x150">
    <h2>
Some text
</h2>
  </div>
  <div>
    <img src="http://via.placeholder.com/350x250">
    <h2>Some text</h2>
  </div>
  <div>
    <img src="http://via.placeholder.com/350x50">
    <h2>Some text</h2>
  </div>
  <div>
    <img src="http://via.placeholder.com/350x450">
    <h2>Some text</h2>
  </div>
  <div>
    <img src="http://via.placeholder.com/350x150">
    <h2>Some text</h2>
  </div>
</wrapper>

Answer №2

SOLVED

Shoutout to Mihai T and CBroe for the help!

I made some adjustments to the Avada Fusion Container by adding the ID "home-product-tiles-wrapper" to contain the 6 columns. Then, I included display: flex & flex-wrap: wrap as shown below.

@media only screen and (max-width: 800px) {
#home-product-tiles-wrapper .fusion-row {
  display: flex !important;
  flex-wrap: wrap !important;
}
#home-product-tiles {
    width: 48% !important;
    margin-right: 2% !important;
    float: left !important;
    display: inline !important;
}
}

The previous layout was not meeting my requirements, as seen in this screenshot: SCREENSHOT BEFORE

Now, after implementing the changes, the display looks just how I wanted it to, as shown in this screenshot: SCREENSHOT AFTER

Thanks once again for all the assistance!

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

Tips for Aligning Several Images Horizontally in an Article

Does anyone know how to center pictures in an article horizontally? I've tried various techniques without success. If it would be helpful, I can share the CSS I currently have. However, I am open to starting from scratch with the CSS as well since I ...

csshtml

Text positioned beneath a toggle switch in html that overlaps

Is there a way to fix the issue of the label on the left side overlapping below the selector switch on my website? I want to ensure that both labels are perfectly distributed on each side of the switch. Here is the code snippet: <div class="ro ...

htmlbootstrap-4

What is the reason behind the modification in flex item size when align-items property is applied?

When creating the responsive design, I utilized flexbox. Surprisingly, without changing the size of each flex-item, applying align-items:center caused the size of the first flex item (PICTURE 2) to change when displayed in a vertical view. On the other han ...

cssflexboxresponsive-design

The behavior of the button type value varies between Internet Explorer and Firefox

Inside a form, I have a button with the following code: <form method="post" action=""> <button type=submit value="hello" name="submitform">World</button> </form> Interestingly, the behavior of this button type varies across differ ...

phphtml

What is the process for implementing hover transitions on link elements?

I am trying to incorporate a transition effect for my links. Essentially, I want the text-decoration (which is currently set to underlink) to gradually appear. Unfortunately, my previous attempt at achieving this has been unsuccessful: #slink{ transit ...

htmlcss

How to Create a DataTable Responsive Feature Where All Columns Collapse on Click, Except the Last One?

I am currently utilizing the DataTables library to generate a responsive table. I am aiming to create a feature where all columns in the DataTable can toggle between collapse and expand states when clicked, with the exception of the last column. Below is a ...

javascripthtmlcssdatatableresponsive

Having trouble choosing a dropdown value with ng-model; the first item keeps showing up as blank when selected

When I attempt to select a dropdown value inside an AngularJS function by setting the value to the ng-model, the dropdown initially shows a blank value selected. Below is my HTML code: <select class="pulldown" ng-model="test" ng-options="obj as obj.des ...

javascripthtmlangularjs

Implementing a Class Addition Functionality Upon Button Click in AngularJS

I have a form that initially has disabled fields. Users can only view the information unless they click the edit button, which will enable the fields with a new style (such as a green border). I want to add a class to these fields that I can customize in m ...

javascriptjqueryhtmlcssangularjs

Gather information from HTML elements that are updated with text dynamically via AJAX calls using Scrapy

My goal is to extract information about mobile phones listed on the 'amazon.in' website from the following link: here using scrapy. Below is the code I am using: from scrapy.spiders import CrawlSpider, Rule from scrapy.linkextractors import Lin ...

pythonhtmlajaxweb-scrapingscrapy

How to specify columns when storing data in a CSV file using Scrapy

As I scrape data from the web, I am facing an issue with my csv file where the links column is always displayed as the first column. How can I specify the placement of columns in the csv file? pName = response.css('#search .a-size-medium') ...

htmlcsscsvweb-scrapingscrapy

"An innovative social media platform feature resembling a Linkedin/Facebook post box

I am looking to develop a post box feature similar to LinkedIn and Facebook. When a URL is pasted into the box, I want a thumbnail to be generated. Two main questions: - Is there an existing component that already does this? I have searched extensively b ...

jqueryhtmlajax

Troubleshooting issue: Chrome bug causing JavaScript full height intro section to have incorrect padding and display issues

Trying to create a full-height intro section using basic JavaScript markup has been quite the challenge. Here's a more detailed explanation: I have a parent DIV element that is supposed to adjust to the full height of the viewport. Unfortunately, t ...

javascripthtmlcssgoogle-chrome

Utilizing Selenium to pinpoint an HTML element through xpath

Currently, I am in the midst of deciphering a colleague's slightly chaotic HTML as I work on developing a website testing program utilizing Selenium WebDriver in Java. Progress has been made thus far (thanks to some helpful insights from SO), but I ha ...

javahtmlseleniumxpath

Utilizing the power of JavaScript in an HTML file to develop a straightforward price calculator

I am new to the world of HTML coding and currently working on an assignment for my online computer course. I reached out to my professor for help, but unfortunately, he hasn't been very responsive. The task at hand is to create a basic cost calculator ...

javascripthtml

Unable to access URL through AppGyver's rootview

As per the information provided in their guide: All location attributes can be either Supersonic routes or URLs. After adding the code to my structure.coffee file, only the initial splash screen appears and nothing else loads: rootView: location ...

angularjshtmlcoffeescriptsteroids

Steps for resetting the HTML5 meter element

I have implemented the meter element to rate between 0 and 5, but I want to display a specific image for each value instead of the default meter style: <meter min="0" max="5" value="5"> <img width="80" height="20" alt="5 out of 5 stars" src=" ...

htmlcss

Unable to access Bootstrap nav link

There seems to be an issue with a link inside the Bootstrap nav-menu. The link is not opening when clicked on. https://i.sstatic.net/lrXmD.jpg I am facing trouble with the Cart file as it does not open when I click on the Cart hyperlink. I have double-ch ...

htmlcsstwitter-bootstrap

Creating consistency in tab spacing within a text area

At the moment, I am utilizing an HTML textarea attribute to collect input from users and then displaying that text back to them formatted. However, there seems to be an issue with how it handles tabs. For instance, when attempting to input the following: ...

htmlangulartexttextarea

Analyzing HTML using Spark

My current project involves: Loading html sources from a csv file Developing functions to extract specific features from the html source. In the past, I used Python with BeautifulSoup for this task. However, my approach has now shifted to using Spark and ...

htmlscalahtml-parsingapache-spark

Design a Hover Mega Menu - click outside to close

Although there are similar topics on stackoverflow, the code I have is different from them. I am trying to achieve the following: If I click on the search box (the white square on the site), my search box should open If I open the search box and then cl ...

jquerycss