Creating fluid designs for my boxes with CSS to enhance responsiveness

I have designed my HTML file with 8 boxes that appear correctly on desktop, but when viewed on mobile devices, the columns are misaligned and shifted to the right side instead of being centered. How can I make it more responsive? See Preview

Here is the code for my columns:

.articles {
    margin: 100px;
    background-color: #F5F5F5;
    }

 .article {
    margin: 5px;
    display: inline-block;
    width: 340px;
    position: relative;
    float:left;
    left: 155px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
  }

  .article-image {
    width: 100%;
  }
  .article-text-wrapper {
    padding: 20px;
  }

  .article-title {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
  }
 .article-description {
    font-family: 'Roboto', sans-serif;
    line-height: 16px; 
    font-size: 16px;
    color: rgba(0,0,0,0.7);
    font-weight: 300;
  }

  .article-time {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: rgba(0,0,0,0.4);
    font-weight: 300;
  }

Thank you in advance.

css

Answer №1

Your article elements currently have the left and margin properties applied. To ensure proper display on smaller screens, you should include a media query as shown below:

@media only screen and (max-width:700px) {
   .articles {
    margin: 50px 0;
   }
   .article {
    left: 0;
    width:100%;
   }
}

Answer №2

Your article is currently experiencing issues due to its fixed width, float property, and inline-block display. A potential solution would be to insert the following media query:

@media only screen and (max-width: 768px) {
  .article {
    margin: 0 auto;
    display: block;
    width: 100%;
    max-width: 340px;
    float: none;
    left: auto;
  }
}

Answer №3

To ensure that your web pages are responsive, it is important to include the following code snippet in all of them:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

By setting the CSS width property to 100% for images, you can make sure that they adjust and scale properly on different devices. It is also recommended to use the max-width property.

For a more effective responsive design approach, consider implementing Media Queries.

@media screen and (max-width: 800px) {
  .class-name {
    width: 100%; /* The width is set to 100% when the viewport is 800px or smaller */
  }
}

To learn more about creating responsive web pages, you can visit this link.

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's the best way to ensure consistent spacing between a label and input field, regardless of the length of the text?

Imagine a scenario where there are 10 input fields, each preceded by a span tag on the left side indicating what should be entered. While working on this setup, I encountered an issue - how can I create a consistent space between the span tag and the input ...

formscsshtml

Update the styling of buttons in CSS to feature a unique frame color other

Can anyone help me with styling Bootstrap buttons and removing the blue frame around them after they're clicked? Here's what I've tried: https://i.stack.imgur.com/jUD7J.png I've looked at various solutions online suggesting to use "ou ...

htmlcssangularbootstrap-4

The table does not move up or down when using the mousewheel over the rows, but only when

I'm encountering an issue with a table inside a div that has overflow-y: scroll applied to it. While the scrollbar appears when there is content overflow, I am unable to scroll using the scrollwheel. It only works when the cursor is directly on top o ...

htmlcssscroll

The Conflict-Free Dilemma of JQuery Cycle

Everything was working smoothly with the implementation of the JQuery Cycle Plugin. However, as I attempted to link a separate JavaScript file for a Menu in the Head Section from this source , <script type="text/javascript" src="js/ddmegamenu.js"> ...

jquerycss

Animation for maximum height with transition from a set value to no maximum height

While experimenting with CSS-transitions, I encountered an unusual issue when adding a transition for max-height from a specific value (e.g. 14px) to none. Surprisingly, there is no animation at all; the hidden elements simply appear and disappear instant ...

javascriptjqueryhtmlcss

How to Center a DIV both Vertically and Horizontally with CSS Positioning?

I'm currently working on a webpage layout where I want to have a main div centered horizontally with three smaller divs inside, aligned both vertically and horizontally with equal spacing. I tried using margin: auto on an empty div to center it in the ...

htmlcss

Display the importance of utilizing Bootstrap 4's range input feature

Is there a way to display the value of a range input in Bootstrap without using Javascript? I found this tutorial but it doesn't show how to do it: https://getbootstrap.com/docs/4.1/components/forms/#range-inputs <div class="container"> < ...

htmlcssbootstrap-4range

Revamp the layout of the lower HTML video menu

Here is my code: <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> video { width: 100%; height: auto; } </style> </head> <body> <video width="400" controls> ...

javascripthtmlcssvideohtml5-video

Ways to remedy the white line produced by CSS transform when hovered over?

Has anyone discovered a fix for the white line or border that appears when an element is transformed with CSS scale on hover? I've tried various solutions such as: transform: translateZ(0), -webkit-backface-visibility: hidden, transform-style: preser ...

csshoverlinetransformscale

What are the reasons behind the issues encountered when enabling "Optimization" feature in Angular that affect the proper rendering of PrimeNg elements?

Angular Version : 9.x Primeng Version : 9.x We've encountered an issue with PrimeNg elements not rendering correctly in our dev/prod environments, although they work fine in the local environment. After some investigation, we found that the culprit ...

javascriptcssangulartypescriptprimeng

Issue with jQuery .css() function malfunction in Internet Explorer

While trying to enhance my website, I experimented with the Add class method $("select[name='" + ABC+ i + "']").addClass('addBorder'); To my disappointment, it worked smoothly in Chrome, FF, and Safari but failed in IE. So I decided ...

jqueryhtmlcss

Utilize varying sizes within a single column using Bootstrap

I am struggling to create a heading that spans the entire width of my listview within Bootstrap. Despite being in the same column, the heading does not extend as far as the listview. I desire for the title to stretch all the way across the list, leading m ...

csstwitter-bootstrap

Utilizing the position relative property with Firefox browser

Similar Question: Is Firefox compatible with position: relative on table elements? Check out this example: a full-width menu formatted as a table with ul dropdown menus. Everything works as expected in IE and Opera, but in Firefox the dropdown uls ex ...

cssfirefoxcss-position

The external embedded CSS seems to be missing from index.html after the Docker build process

My Vue/Webpack application includes an embedded CSS link in my index.html file that references an external source. Here is an example snippet: <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" con ...

htmlcssdockernpmwebpack

Troubleshooting alignment problems with a responsive gallery (Bootstrap-gallery & justifyGallery)

Looking to showcase a gallery of images using jquery-justifyGallery and bootstrap-gallery. Want to display 4 images in a row, but running into issues when trying to display 5 images where the last image in the row ends up with a larger width. Bootstrap has ...

javascripthtmlcsstwitter-bootstrap

To collapse a div in an HTML Angular environment, the button must be clicked twice

A series of divs in my code are currently grouped together with expand and collapse functionality. It works well, except for the fact that I have to click a button twice in order to open another div. Initially, the first click only collapses the first div. ...

javascripthtmlcssangulartypescript

Rules of HTML tables extend to the border size

Check out this HTML code snippet: div { border: 2px solid red; height: 50vh; width: 50vw; } table { border: 1px solid; table-layout: fixed; } <div> <table rules="cols"> <tr> <th>Name</th> < ...

htmlcsshtml-table

How can you prevent an element from overflowing when employing window.pageYOffset and using a switch case to alter the background color at specified pixel thresholds?

I want the <body> element's background-color to change every 500px as I scroll down. I've scoured the web for answers, but still can't figure out what's going wrong. Please review the code. However, Firefox Browser indicates that ...

javascripthtmlcss

What is the process for converting a hexadecimal color to rgba when using the Less compiler?

Here's the code snippet I'm working with: @shade : #d14836; .stripes span { -webkit-background-size: 30px 30px; -moz-background-size: 30px 30px; background-size: 30px 30px; background-image: -webkit-gradient(linear, left top, ri ...

cssless

Tips on utilizing jquery slideDown alongside appendTo

I am currently utilizing an ajax request to retrieve records from the database and then appending the data in HTML. However, I want the HTML to slide down once the data has been appended, but I'm unsure of how to achieve this. Below is the ajax metho ...

jquerycssajaxappendslideup