Unable to set the correct title view for mobile devices

We have successfully styled the products for desktop view and larger phones, but we are facing challenges in adjusting them properly for smaller phones.

Below you will find a photo and corresponding code snippets:

/* Products list - view list */
.products-list .item .item-inner .box-info-list {
margin-left: 150px;
padding: 2px;
}
.products-list .item .item-inner {
    -moz-box-shadow: 3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    box-shadow: 1px 1px 2px 1px #ccc;
    margin-bottom: 15px;
}
.products-list .item .item-inner:hover {
    -moz-box-shadow: 3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    box-shadow: 2px 2px 3px 2px #ccc;
}

.products-list .item .item-inner .box-image-list {
width: 140px;
border: 0px solid #ddd;
}
@media (min-width: 320px) and (max-width: 767px) {
.products-list .item .item-inner .box-info-list .product-name {
    font-weight: 700;
    font-size: 90.33%;
    text-transform: capitalize;
    margin-bottom: 0px;
}
.products-list .item .item-inner .box-image-list {
width: 30%;
border: 0px solid #ddd;
}
.products-list .item .item-inner .box-info-list {
margin-left: 140px;
padding: 2px;
}
}

Image link:

Image link:

Image link:

Screenshot of the issue:

css

Answer №1

In my personal opinion, I find that utilizing flexbox along with CSS3 is the optimal choice for creating responsive web designs. Here is an example of how you can implement this:

@media (max-width: 767px) {
  .products-list .item .item-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .products-list .item .item-inner .box-image-list {
    flex-basis: 30%;
  }

  .products-list .item .item-inner .box-info-list {
    flex-basis: 65%;
    margin-left: 0;
  }
}

Answer №2

@Sylvester

Observing that the parent element is utilizing display table and margin-left is being used on one of the child elements. In my opinion, I would opt for a different approach like using display flex. However, implementing display table-cell without specifying width on the child elements can resolve many issues :).

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 approach for promoting reusability in Angular: creating a new CSS class or a new component?

I have a div with a set of CSS properties that are essential to my application. These properties will be reused across multiple pages and components. <div style="display: flex; flex-direction: column; height: 100%"> //inner html will vary based on c ...

htmlcssangularangular8

When scrolling back to the top of the page, the data-spy feature does not re-highlight the "Home" anchor

After experimenting with Data-spy to change the active anchor while scrolling, I encountered an issue. Upon scrolling back up to the top of the page from the about section, the "Home" anchor failed to re-activate. How can this be fixed? I attempted to rem ...

javascripthtmlcsstwitter-bootstrapscroll

Using JavaFX to create a TreeTableView with nodes of varying sizes

I need assistance with styling TreeTableViews and their rows. I have set up a treetableview showcasing objects named Component, divided into classes A, B, and C. In my setup, B objects are nested within A, and C objects are nested within B objects. While I ...

javacssjavafxtreetableview

"Is it possible to keep an eye on two different events and take action once they both

I have a menu with different submenus for each list item, all utilizing the same background tag. Currently, when one submenu is open and I hover over another list item, the previous submenus hide and the new one opens. What I want is for the content to cha ...

javascriptjqueryhtmlcss

Creating a radial gradient texture using CSS

I'm encountering an issue with my radial gradient and texture combination. Here is the code snippet I am using: background-image: url('../img/texture.png'); /* fallback */ background: -moz-radial-gradient(rgba(253,253,253,0.1) 0%, rgba(2 ...

css

How to attach input to function invocation in Angular 2

Can we connect the @Input() property of a child component to a parent component's function call like this: <navigation [hasNextCategory]="hasNextCategory()" [hasPreviousCategory]="hasPreviousCategory()" (nextClicked)="next ...

javascripthtmlcssangularjsangular

Experiencing difficulties with the footer design in bootstrap framework

After creating a basic web page, I encountered an issue with the footer. No matter what adjustments I make, the text is not centered and it does not stay fixed when changing the browser height. To view the code snippet and preview, visit: ...

htmlcsstwitter-bootstrapfooter

A guide on changing a plus sign into a minus sign with CSS transition

Is there a way to create a toggle button that changes from a plus sign to a minus sign using only CSS, without the need for pseudo-elements? The desired effect is to have the vertical line in the "+" sign shrink into the horizontal line. While I know it& ...

javascripthtmljquerycsscss-transitions

Is it possible to locate both the child and parent elements by their class names simultaneously using WebDriver?

When conducting a search on eBay that returns more than 50 listings, such as this example, the site displays the results in either grid or list format. Using the WebDriver tool, I am extracting prices by their class name: https://i.stack.imgur.com/dGNzw. ...

pythonhtmlcssseleniumselenium-webdriver

Aligning images in a table grid of 300px by 300px dimensions

I've included my code below and I am searching for the most effective method to use CSS to center an image both horizontally and vertically within a 300 by 300 pixel square. If the image is larger, it should be resized to fit within the square, while ...

htmlcsshtml-tablecentering

My intention is to personalize the react-select component to suit my needs

My task involves changing the size of the arrow to be smaller and positioning it under the circle. Despite setting the width and height in the CSS, the desired effect is not achieved. To align with the UI requirements, I need to adjust the swiper-button- ...

htmlcssreactjs

What causes the code following the </html> tag to be shifted in front of the </body> tag? Is there a noticeable improvement in performance

After exploring various Stack Overflow posts like this particular SO question, I came across an unconventional Google recommendation on CSS optimization. This recommendation suggested deferring CSS loading with markup that looked like this: <d ...

htmlcssvalidationdomcross-browser

What is the best way to achieve a seamless CSS transition for my sticky navigation bar?

Looking to create a sticky bar with a smooth CSS transition instead of the current rough effect. Any tips or hints would be greatly appreciated! For reference, I found the exact animation I'm aiming for on this website: https://css-tricks.com/ Here i ...

jquerycss

I am experiencing issues with my PHP quiz application; it is malfunctioning when I try

In my PHP MySQL quiz application, I have developed two sections: one for students and another for admins. In the admin area, there is an "addquestion" page where the code is as follows: <form class="form-horizontal " action="addquestion.php" method=" ...

phphtmlcssmysql

How to Left Align Div Centered Within Another Div?

I've encountered an issue with centering icons in my HTML code. Despite trying to fix it myself, the icons always appear left-aligned. I would greatly appreciate any assistance from the helpful members of this community. It's likely a simple fix ...

csshtmlcss-float

Is it possible for the font size to adjust based on the heading (h1, h2, h3) I choose when using CSS to specify a particular font size?

What will happen if the following HTML code is used: <h1> This is text</h1> <h2> This is also text</h2> and CSS is applied to change the font size like this: .h1 { font-size: 30px } .h2{ font-size: 30px } Will both texts ...

htmlcss

Showing nested div elements in a single row

I'm currently dealing with a react component that generates nested divs. My goal is to make sure all the divs are displayed on the same line, but the catch is I can only apply styles to the outermost container div. Is there a way to achieve this witho ...

htmlcssreactjs

What causes a horizontal line to form when a user enters white space?

I have written a piece of code which seems to be causing an issue when running it. Whenever I input empty spaces, it results in creating a horizontal line. import React, { Component } from 'react'; export default class App extends Component { co ...

javascriptcssreactjs

Locate the checkbox label using CSS

Is there a way to replace the standard checkboxes with font-awesome icons without modifying the generated HTML or using jQuery? EDIT: The code includes JavaScript that prevents me from making changes. Also, note that the label text class can be -1 or -2 a ...

htmlcsscheckboxcss-selectors

What is the process for converting x and y coordinates to align with a fixed display?

When I make an API call, I am receiving X and Y coordinates in the following format: x: "-0.0120956897735595703" y: "0.147876381874084473" To display these coordinates on my minimap images, I have set their display to be absolute. The "left" and "top" pr ...

javascripthtmlcssreactjsmath