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: https://i.sstatic.net/RCBlR.png

Image link: https://i.sstatic.net/Ggvz7.png

Image link: https://i.sstatic.net/ikeaa.png

Screenshot of the issue: https://i.sstatic.net/sZdqd.png

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 :).

https://i.sstatic.net/SaL0z.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

The synchronization issue between ng-class and animation

I'm experiencing a strange issue with ng-class and suspect that it may be related to a race condition. Here is the example on Plunker: example Below is the relevant JavaScript code: self.slideLeft = function() { if (self.end_index < se ...

javascripthtmlcssangularjs

Positioning searchbar on the right side in bootstrap 5

How can I fix the search bar on the right side of the screen within the Bootstrap navbar, without compromising its flexibility? I want it to always stay at the rightmost side regardless of the number of links in my navigation bar. As a beginner in CSS and ...

htmlcss

Preventing special characters, numbers, and spaces from being used as the first character in a word in HTML with regular expressions

Is there a way to restrict users from inputting special characters, numbers, and spaces only in the first place of a word using regex in HTML? <label><span>Current Carrier</span></label> <input name='Current Carrier' t ...

javascriptc#htmlcssregex

What is the best way to incorporate this video into this particular frame?

Does anyone know how to insert an image with a specific shape using SVG? I have the exact shape I want in an SVG file. Do I need to use relative or absolute positioning with respect to the SVG, or are there other solutions available? <svg width="90 ...

csssvg

Add the onclick() functionality to a personalized Angular 4 directive

I'm facing an issue with accessing the style of a button in my directive. I want to add a margin-left property to the button using an onclick() function in the directive. However, it doesn't seem to be working. Strangely, setting the CSS from the ...

javascriptcssangulartypescriptangularjs-directive

Can you please explain to me how to target a specific element by its ID in the DOM and then move on to the next element with the same ID using jQuery

During the event handling process, a scenario arises where two div elements end up having identical IDs within the DOM structure. While using JQuery, my objective is to specifically target the second occurrence of the div with the aforementioned ID in the ...

javascriptjqueryhtmlcssdom

Are all elements still displaying the menuBar style? Using the PHP include function, <?php include... ?>

Here is the Menu Bar code I am using: <!DOCTYPE html> <html> <link href = menuBarStyle.css rel = "stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <div class = "menu"> ...

htmlcss

Utilizing LESS for Mixing

I've been diving into the official LESS documentation (version 1.5) and I'm struggling to grasp how I can import a reference to another CSS file to utilize its content in my own stylesheet. For instance: stylesheet.less @import (reference) "boo ...

csstwitter-bootstraplessmixins

CSS might not always work properly on all web browsers, but it functions perfectly on Eclipse

When developing JSF pages with stylesheets, everything seems to be working fine in the Eclipse preview function. However, when I test the pages on IE8, the styles do not seem to have any effect. I am utilizing composite views to define a general layout fo ...

cssjsffacelets

How can I adjust the border opacity in a React application?

Can we adjust the border color opacity in React when using a theme color that is imported? For example, if our CSS includes: borderBottomColor: theme.palette.primary.main and we are importing the theme with Material UI using makeStyles, is there a way to ...

cssmaterial-ui

Steps for triggering a click event on a div with a button role within a class containing multiple elements

Can anyone help me figure out how to auto-click every button in Instagram's "hide story from" settings using console? I tried the following code: for (let i = 0; i < 300; i++) { document.getElementsByClassName('wbloks_1')[i] ...

javascripthtmljquerycss

The Bootstrap modal is not properly clearing all attribute properties when it is hidden

Alrighty, so I've got this modal set up: <div id="modal-container" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content center-block" style="displ ...

javascriptjqueryhtmlcsstwitter-bootstrap

The JavaScript function modifies the value stored in the local storage

I'm in the process of developing a website that requires updating the value of my local storage when certain JavaScript functions are executed. Currently, I have this code snippet: localStorage.setItem('colorvar', '#EBDBC2'); I&ap ...

javascripthtmlcssfrontendstorage

Executing a PHP script to initiate a ping transmission

I have a project to complete for my university involving the development of a simple application. However, I lack experience in this area and am unsure how to proceed. The objective is straightforward: I want to send ping requests to 50 IP addresses at t ...

javascriptphpcsshtmlping

Separating stylesheets, head, and other elements in a curl response

After successfully using curl to retrieve an external site, I noticed that the results were interfering with my own content. The CSS from the external site was affecting my webpage's layout and z-index values were conflicting. I am seeking a solution ...

javascriptphphtmlcsscurl

Distinguishing background colors depending on the browser's compatibility with CSS properties

I've successfully designed a polka dot background using pure CSS: .polka-gr{ background-image: radial-gradient(#FAFFB3 20%, transparent 0), radial-gradient(#F1C3CB 20%, transparent 0); background-size: 30px 30px; background-positio ...

cssprogressive-enhancement

Guide to utilizing JavaScript for a basic gaming experience

Looking to incorporate multiple divs that will vanish upon being clicked, while also increasing the score by 1 through javascript. Any suggestions on how to accomplish this? ...

javascripthtmlcssonclick

What is the best method for serving static files within a nested EJS view directory?

Assuming I have the directory structure below: |--Views/ | --partial/ | --links.ejs | |--assets/ | --css/ | --styles.css | |--server.js Code for links.ejs <link rel="stylesheet" type="text/css" href="css/forms/switches.css"& ...

javascripthtmlcssnode.jsexpress

Why Safari is Not Displaying Drop Shadows on SVG Path Elements in CSS

I implemented an SVG triangle using HTML: path { fill: red; filter: drop-shadow(5px 3px 17px rgb(0 0 0 / 1)); } <svg style="height: 36px; width: 100%; background-color: #EAEAEA ;" viewBox="0 0 436 217" preserveAspectRatio="none" class="Tagline ...

htmlcsssvgsafari

What is the best way to enclose text within a border on a button?

I am trying to create a button with a colored border around its text. Here is the code for my button: <input id="btnexit" class="exitbutton" type="button" value="Exit" name="btnExit"></input> Although I have already added CSS styles for the ...

htmlcss