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

What steps should be followed to effectively incorporate Google Fonts into a Material UI custom theme for typography in a React/TypeScript project

Hey there, I'm currently working on incorporating Google fonts into a custom Material UI theme as the global font. However, I'm facing an issue where the font-weight setting is not being applied. It seems to only display the normal weight of 400. ...

cssreactjstypescriptwebpackmaterial-ui

Toggle the state of a Material UI checkbox in ReactJS based on the data from hooks that return a true or checked value

I need assistance with checking/unchecking a checkbox value in an edit modal based on the return of addAdvisory(hooks) which is 'Y', indicating true/checked. Below is my basic code snippet: const [addAdvisory, setaddAdvisory] = useState({ SY ...

javascriptreactjsmaterial-ui

What is the process of transferring data from one div to another div (table) using AngularJS?

In my quest to enhance my table with JSON data upon clicking the + icon, I am faced with two sections: Pick Stocks where stock names and prices (retrieved from data.json) need to be added to the table found in the Manage Portfolio section. First Section h ...

javascriptangularjs

The .ajaxSubmit function in jquery.form.js seems to be malfunctioning when using the data option

I'm currently working with the jQuery plugin jquery.form.js and I'm looking to programmatically submit a form while including a file. Although I've set up the code and options to work with $.ajax, it's not functioning with .ajaxSubmit. ...

javascriptjqueryajaxforms

Dynamic visuals created with Jquery and Ajax

While I'm not an experienced developer, I have managed to work with some small Jquery scripts. Lately, I've been struggling for the past month trying to figure out how to implement a specific functionality that I would like to incorporate. Does a ...

jqueryhtmlcssajaxgallery

Change PHP code to a JSON file format

I am currently learning Laravel and my current focus is on how to send a JSON file from the back end to the front-end. I intend to utilize this JSON data to generate a graph. Within my model, I have created a function that retrieves values and timestamps ...

javascriptphpjsonlaravel

F# Using Ajax Post with JQuery

Attempting to utilize an Ajax Post to communicate with my F# controller in order to invoke a method that outputs a simple string. The ultimate goal is to have data selected via checkboxes on the webpage inserted into a database. Struggling with understand ...

javascriptjqueryajaxcheckboxf#

Using both withNextIntl and withPlaiceholder simultaneously in a NextJS project causes compatibility issues

I recently upgraded to NextJS 14 and encountered an issue when deploying my project on Vercel. The next.config.mjs file in which I wrapped my nextConfig in two plugins seemed to prevent the build from completing successfully. As a workaround, I decided t ...

javascriptnode.jstypescriptnext.jsnext-intl

The jQuery Modal Dialog functions properly on the initial page load, but fails to work on subsequent pages unless manually refreshed

So, I've encountered an issue with my jQuery modal dialog. It's set up to remind non-registered users to sign up when they try to access user-only actions. Oddly enough, the dialog functions perfectly after a page refresh on THAT specific page. H ...

javascriptjqueryruby-on-railsdialogmodal-dialog

Incapable of grasping the intricacies of condensed

I recently came across a code snippet on geekcode(dot)tk and I have a question about it. Specifically, I would like to understand why the section within the table data tag is written in that particular way (at the bottom of the provided code). Thank you fo ...

phphtml

The jQuery .ajax function works perfectly in Firefox but encounters issues in IE7 and IE6

Regarding my previous inquiry: Issues with jQuery .load Method causing page refresh AJAX After switching to the .ajax method instead of .load, it now works smoothly in Firefox but encounters problems in IE7 or IE6: $('ul#coverTabs > li > ...

jqueryajaxinternet-explorer-7internet-explorer-6

It seems that the `to` required prop was missing in the `Link` component of React-Router

Currently, I am facing an issue while trying to integrate react-router. The error message I'm encountering is: Failed propType: Required prop to was not specified in Link. Check the render method of app. Unfortunately, I am unable to pinpoint ex ...

javascriptreactjsreact-router

Change the parent title attribute back to its original state

This is in contrast to queries similar to the one referenced here. In my scenario, there is a child element within a parent element (specifically a matSelect within a matCard, although that detail may not be significant) where the parent element has a set ...

htmlangulartypescriptproperty-binding

How to dynamically increase vote tallies with React.js

The voting system code below is functioning well, displaying results upon page load. However, I am facing an issue where each user's vote needs to be updated whenever the Get Vote Count button is clicked. In the backend, there is a PHP code snippet ...

javascriptreactjs

What is the best way to sort my API responses to display only users who are either currently online or offline?

Hi everyone, I've made great progress on my project so far without any assistance (pretty proud of myself), but now I could use some help. I'm working on creating a tabbed menu that filters the results of my API calls to display: All users, Onlin ...

javascriptjqueryjson

Animate with jQuery to swap the positions of two floating divs

Hello, I recently made some updates to the code by adding 2 divs of different sizes. I am trying to achieve a switching animation using CSS floats for these divs. If you'd like to take a look at the current code, please visit - http://jsfiddle.net/jz ...

jqueryhtmlcssjquery-animatecss-float

Managing state in React for a nested object while still maintaining the data type of the

Exploring the question further from this particular query Updating State in React for Nested Objects The process of updating nested state involves breaking down the object and reconstructing it as shown below: this.setState({ someProperty: { ...this.stat ...

javascriptreactjs

A step-by-step guide on enhancing error message handling for Reactive forms in Angular

Here is a code snippet that I'm working on: public errorMessages; ngOnInit(): void { this.startErrorMessage(); } private startErrorMessage() { this.errorMessages = maxLength: this.translate.instant(' ...

javascriptangulartypescriptformsangular-reactive-forms

While working with ajax form submission in CodeIgniter, I encountered an issue where I did not receive the expected value in the

For my project, I am using PHP Codeigniter and submitting a form through an Ajax call. However, I am facing an issue where I am not receiving the expected value in the success message. Below is the code snippet: Ajax Call: function addLocation(){ va ...

phpjqueryajaxcodeigniter

Generating an array of objects using Jquery from XML data

I need assistance with extracting data from XML text nodes stored in a variable and then creating an array of objects using jQuery. The XML data I have is as follows: var header = ['name', 'data1', 'data2']; var data = &apos ...

javascriptjqueryxmlhtml-table