Tips for stacking objects vertically in mobile or tablet view using HTML and CSS

I have been diligently working on a project using a fiddle, and everything appears to be running smoothly in desktop view.

The functionality is such that upon clicking any two product items (with one remaining selected by default), a detailed description box is displayed at the bottom explaining these products in detail.


The CSS code snippets I've implemented for the mobile view are as follows:

@media only screen and (max-width: 767px)
{
.product-all-contents
{
   overflow-x: auto;
}

.product-contents .product{
  min-width: 50.795%;
  margin: 0 2%;
    padding-top: 3.91%;
    padding-left: 3.91%;    padding-right: 3.91%;
  }
}


Issue at Hand:

On the mobile view, there seems to be a slight problem. It appears that both product item explanations are visible when only one should be displayed without altering their appearance.

I aim for the mobile experience to mirror the desktop one - where clicking on a product item reveals its description at the bottom, and selecting another product item displays its corresponding description while keeping the layout unchanged.

The necessity of display:inline-block !important arises from my desire for the items to stack vertically in HTML/CSS on mobile devices. Removing this may compromise the visual integrity of the images and text.

javascriptjqueryhtmlcssmedia-queries

Answer №1

The reason why this is happening is because you have specified 

display: inline-block !important;
for both div.franchisehubtv and div.cloudbasedtextipad in the 
@media only screen and (max-width: 767px)
, which takes precedence over your display: none; css.

Solution No: 1

To resolve this issue, you can remove those classes from the media query, so your @media section will look like this:

@media only screen and (max-width: 767px)
{
div.goal-setting, div.customization-tools, div.custom-invoicing, div.lead-tracking, div.email-marketing, div.royalty-calculator, div.brand-control, div.business-analytics,div.tech-support, div.employee-management, div.order-management, div.white-label {
  display: inline-block !important;
}
.cloudbasedtextipad, .franchisehubtv {
   flex-direction: column;
 }
.tv img {
   max-width: 100%;
   height: auto;
  }
}

Solution No: 2

You can also fix this by overriding the existing css with the following lines of code:

div.franchisehubtv[style="display: none;"] {
    display: none !important;
}
div.cloudbasedtextipad[style="display: none;"] {
    display: none !important;
}

Check out the updated fiddle here

Update: You may want to consider using flex for small devices to set your layout

Answer №2

It seems there may be a bit of confusion. Can you clarify if you want the mobile view to match the display on desktop? If that's the case, I suggest looking into utilizing the Bootstrap grid system and using their CSS as a guide.

Answer №3

Upon reviewing your existing solution, it appears that the second div contains a style rule that is activated when the screen width is below 767px, causing it to be displayed as an inline-block. By utilizing the !important declaration, this rule takes precedence over any other property declarations.

If you were to remove this particular rule, the layout would become distorted; however, the div remains hidden as required.

In terms of the layout structure, refining the flexbox rules within each div will be necessary. These rules can dynamically adjust the direction - either in column or row format - based on the same breakpoint:

flex-direction: column (for mobile)
flex-direction: row (for non-mobile)

Answer №4

One issue that needs attention is the use of inline style for setting the display property in the HTML code. This necessitates the use of important to override it. Another concern is the absence of display: inline-block consideration in your jQuery implementation.

Several adjustments need to be made. I have updated the fiddle to address these issues, where the items only become visible upon button click. There are various ways to accomplish this, but my goal was to make minimal changes to showcase the desired outcome.

https://jsfiddle.net/zaefnson/2/

Additionally, the functionality may not work on desktop as expected. As previously mentioned, multiple modifications will be required.

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

Trouble arises when incorporating a new feature onto a map with OpenLayers and Vue.js

I'm currently working on integrating a custom control into my map using OpenLayers with Vue.js. The Explore.vue component is responsible for creating the "map" (olmap) with OL, and I bind it to the child component LeftSideBar2.vue. However, when att ...

javascriptvue.jsopenlayers

Tips for incorporating a personalized CSS stylesheet while utilizing Bootstrap

When trying to use my custom CSS alongside Bootstrap, I'm running into some issues. The !important tag doesn't seem to have any effect (I've also heard that using !important is not recommended). Additionally, using IDs instead of classes isn ...

htmlcssbootstrap-4

The error message "Express Routing - Attempting to access property 'include' of undefined" is displayed when an

I am attempting to implement basic routing based on the user's selections on the first page. If the user picks 2 out of 3 options on the parent page, I want them to only see those two child pages and not the third. My strategy for the parent page was ...

javascriptnode.jsexpressroutes

Accordion border in Bootstrap should be applied to all items except the first one

I am currently implementing Bootstrap accordions in an Angular application and I am facing an issue where I want to have a colored border all around each accordion panel. The problem is that by default, Bootstrap removes the top border from all accordions ...

cssangularbootstrap-5bootstrap-accordion

How can I include an HTML tag within a select input value in a React.js project?

I am facing an issue while trying to map values from the input field of a select tag. It seems to be returning [Object object] for some reason. When I do not include another tag in the return statement of the map function, the output works fine. However, I ...

javascripthtmlreactjs

The element type provided is not valid: it was expecting a string but received undefined. Please review the render method of AnimatedComponent in ReactNavigation

I've been facing an issue for the past few days with ReactNavigation v6+. While there are multiple questions and answers about the invalid element type, none of them seem to be working with this specific example: The problem arose after integrating t ...

javascriptreactjsreact-nativereact-navigationreact-navigation-v6

W3C Validation with a Dynamic Twist

I currently have a small feature on my website that indicates the validity of the markup for the current page. It is currently set as "HTML5 Valid", but I am thinking about making it more dynamic. I want it to automatically check if the page's markup ...

phpjavascriptvalidationw3c

"Techniques for incorporating a screen in Angular application (Switching between Edit and View modes) upon user interaction

We are currently working on a screen that requires the following development: This screen will have the following features: When clicking on a button, the fields should become editable. In the image provided, there is some repeated data, but in our case, ...

javascripthtmlangular

Ensure form is validated using regula.validate() and display a customized error message

I needed to implement form validation with custom error messages as shown below: <input type="text" name="numberdigit" class="numberClass" placeholder="Number Digit" data-constraints='@Required(message = "Number Digit is required.")' />< ...

javascriptjqueryvalidationregula

Guide on executing a Python script using Node.js

I have set up a node.js server on Raspberry Pi and encountered an issue when trying to run a python script from it. Despite receiving the correct output from the client, the file fails to execute in this instance involving socket.io. The socket functiona ...

javascriptpythonnode.jssockets

Adding query strings to the end of a URL in order to redirect to a new destination

After successfully capturing a query string at the start of my survey with PHP syntax, I now have it stored in a variable. My next challenge is to redirect to a different URL at the end of the survey, while also including that same query string. For insta ...

phpjqueryhtmlajax

Is it possible to incorporate HTML tags within the <template> section of AIML files?

My goal is to create a simple bot using an AIML file. The idea is that I can input a question and the corresponding pattern will be returned from the file. For instance, I have this sample pattern in my AIML file: <category> <pattern>TEST& ...

pythonhtmlartificial-intelligenceaiml

Choose the descendant element of the element that has a specific attribute

One of the issues I am facing is related to a button with a span tag inside for the text. Occasionally, this button might be disabled, and my goal is to have it appear grey when in that state. However, I am encountering difficulties making this work proper ...

csshtmlattributescss-selectors

Bringing in the jqGrid library with Meteor using NPM

I am currently working on a project using Meteor and I want to incorporate the free-jqgrid library. However, I am unsure of the correct way to import this library... I have tried: import 'free-jqgrid'; import jqGrid from 'free-jqgrid&apo ...

javascriptnode.jsmeteornpmjqgrid

What are the IF conditions for multiple radio button fields using jQuery?

Click here to view the demo <form action=""> <input type="radio" name="colour" value="black"> black <br> <input type="radio" name="colour" value="white"> white <br> <br> <input type="radio" name="form" value="rou ...

jqueryif-statementconditional-statementsradio-button

Struggling with incorporating a search feature? Encounter the error message "TypeError: data.filter is not a function"?

UPDATE: here is what console.log(data) shows. The data appears correctly, but the filtering process seems to be malfunctioning.] !https://imgur.com/a/SsEDAKj! UPDATE 2: this.state.items represents an array. I am currently working on integrating a search ...

javascriptarraysreactjsapiecmascript-6

What could be the possible reason for the controls in my element getting disabled due to adding a JavaScript background

First and foremost, I want to share a link with you to a page that I am currently developing so you can better understand the situation: Additionally, here is a link to the background effect: https://github.com/jnicol/particleground If you visit the page ...

javascripthtmlcsswordpress

Using a for loop in conjunction with Observable.forkJoin

In my component, I am striving to populate an array known as processes, containing individual process objects that each have a list of tasks. Currently, I am dealing with two API calls: /processes and /process/{processId}/tasks I utilize the /processes ...

javascriptangularobservableangular2-observables

Stack the labels of separate datasets on top of each bar in a bar chart using Chartjs: How can this be achieved?

chart.js 4.4.2 chartjs-plugin-datalabels I am aiming to achieve this effect const chartCtr = document.querySelector('#temp-chart1') as HTMLCanvasElement; new Chart(chartCtr, { type: 'line', plugins: [ChartDataLabels], opt ...

javascripttypescriptchartschart.js

What is the best way to conceal Bootstrap accordion content when first loading my single-page application?

I am currently developing a single page application for an ESP32 device. I have chosen to keep all the content in one document as there is not a lot of information to display. My approach started with using the collapse class from Bootstrap 4.1.2. While i ...

htmlcssbootstrap-4