What is the best way to ensure an image fills the entire width on smaller screens?

I am in the process of creating a news blog. I have successfully designed my main article cards, each featuring an image to the left and essential content such as title, brief description, author, and date on the right side.

While everything appears flawless on a maximized browser (I'm currently using a 13-inch laptop), issues start to arise when I begin resizing the window. The image within the card fails to occupy the entire width, leaving excessive white space to its right.

Despite trying to set the image's width to 100%, the problem persists. I am puzzled as to why this distortion is occurring exclusively with these article cards as other elements on the homepage adapt correctly even on smaller screens.

If you could spare some time to elucidate this issue and provide a solution, it would be greatly appreciated. Thank you!

Screenshots:

Larger Screens

https://i.sstatic.net/HiAL4.png

Upon resizing the browser window to a smaller size, the display distorts as shown below:

https://i.sstatic.net/c0nHB.jpg

https://i.sstatic.net/eFLMy.jpg

Lastly, for phones or smaller screens:

https://i.sstatic.net/sV4q7.png

HTML Code

<div class="card card-article">
        <div class="row no-gutters right-shadow-games">
            <div class="col-auto">
                <img alt="" class="img-fluid" src="//placehold.it/200x200"> <a class="article-tag games" href="#">Games</a>
            </div>
            <div class="col">
                <div class="card-block">
                    <div class="row">
                        <div class="col-md-12">
                            <h4 class="card-title"><a href="#">How Did van Gogh’s Turbulent Mind Depict One of the Most Complex Concepts in Physics?</a></h4>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <p class="card-description">Pick the yellow peach that looks like a sunset with its red, orange, and pink coat skin, peel it off with your teeth. Sink them into unripened...</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-9">
                            <p class="card-author"><a href="#">Author on Sep 29, 2017</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS Code

.card-article {
    margin-top: 2px;
    margin-bottom: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.card-article .card-title{
    margin-top: 15px;
    margin-left: 15px;
    margin-right: 10px;
    font-size: 18px;
}

.card-article .card-author{
    margin-left: 15px;
    margin-right: 10px;
    color: #8d8d8d;
    font-size: 12px;
    line-height: 1.4;
}

.card-article .card-title a{
    color: black;
    font-weight: 600;
}

.card-article .card-description{
    margin-left: 15px;
    margin-right: 10px;
    color: #8d8d8d;
    font-size: 14px;
    line-height: 1.4;
}

The CSS might be a bit messy, but I can certainly tidy it up a bit

csshtmltwitter-bootstrapbootstrap-4

Answer №1

When adjusting the image size to 100% width at 640px media width, consider increasing it further for better picture clarity.

.card-article {
  margin-top: 2px;
  margin-bottom: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.card-article .card-title {
  margin-top: 15px;
  margin-left: 15px;
  margin-right: 10px;
  font-size: 18px;
}

.card-article .card-author {
  margin-left: 15px;
  margin-right: 10px;
  color: #8d8d8d;
  font-size: 12px;
  line-height: 1.4;
}

.card-article .card-title a {
  color: black;
  font-weight: 600;
}

.card-article .card-description {
  margin-left: 15px;
  margin-right: 10px;
  color: #8d8d8d;
  font-size: 14px;
  line-height: 1.4;
}

.article-tag.games {
  position: absolute;
  left: 10px;
  top: 10px;
  background: red;
  padding: 2px 5px;
  color: white;
  border-radius: 4px;
}

.col-auto img {
  max-width:200px;
}

@media (max-width: 640px) {
.col-auto {
  width:100%;
  max-width:100% !important;
}
.col-auto img {
  width:100%;
  max-width:100%;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<div class="card card-article">
  <div class="row no-gutters right-shadow-games">
    <div class="col-auto">
      <img alt="" class="img-fluid" src="//placehold.it/640x640"> <a class="article-tag games" href="#">Games</a>
    </div>
    <div class="col">
      <div class="card-block">
        <div class="row">
          <div class="col-md-12">
            <h4 class="card-title"><a href="#">How Did van Gogh’s Turbulent Mind Depict One of the Most Complex Concepts in Physics?</a></h4>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <p class="card-description">Pick the yellow peach that looks like a sunset with its red, orange, and pink coat skin, peel it off with your teeth. Sink them into unripened...</p>
          </div>
        </div>
        <div class="row">
          <div class="col-md-9">
            <p class="card-author"><a href="#">Author on Sep 29, 2017</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer №2

The issue you're experiencing is due to your image being a fixed 200x200px size, which prevents it from resizing when the page dimensions change. One solution could be to replace the image with one that is more flexible in size (although I don't necessarily advise this approach), or alternatively, you may consider implementing a media query in a separate stylesheet specifically for variable width devices, where you can adjust the height and width as needed.

Answer №3

Instead of using col-auto, try using col-md-4 to wrap the image in a div (check out the example on https://jsfiddle.net/yemd0qnt/3/)

.card-article {
    margin-top: 2px;
    margin-bottom: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.card-article .card-title{
    margin-top: 15px;
    margin-left: 15px;
    margin-right: 10px;
    font-size: 18px;
}

.card-article .card-author{
    margin-left: 15px;
    margin-right: 10px;
    color: #8d8d8d;
    font-size: 12px;
    line-height: 1.4;
}

.card-article .card-title a{
    color: black;
    font-weight: 600;
}

.card-article .card-description{
    margin-left: 15px;
    margin-right: 10px;
    color: #8d8d8d;
    font-size: 14px;
    line-height: 1.4;
}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="card card-article">
        <div class="row no-gutters right-shadow-games">
            <div class="col-md-4">
                <img alt="" class="img-fluid" src="//placehold.it/200x200"> <a class="article-tag games" href="#">Games</a>
            </div>
            <div class="col">
                <div class="card-block">
                    <div class="row">
                        <div class="col-md-12">
                            <h4 class="card-title"><a href="#">How Did van Gogh’s Turbulent Mind Depict One of the Most Complex Concepts in Physics?</a></h4>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <p class="card-description">Pick the yellow peach that looks like a sunset with its red, orange, and pink coat skin, peel it off with your teeth. Sink them into unripened...</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-9">
                            <p class="card-author"><a href="#">Author on Sep 29, 2017</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer №4

Easily adjust image width using Media Queries specifically for mobile devices.

@media (max-width: 575px) {
.img-fluid{width:100%;}
}

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 are some ways to utilize a Bootstrap modal button embedded within a clickable row?

Having a strange issue in my project. I am trying to incorporate a modal button inside a link-able row. However, when I click the button to trigger the modal id, it pops up and then redirects to the myexample.com page, which is expected behavior. While I ...

htmlbootstrap-4

As I continue to fill the child DIV element with more text, the shrink wrap is compromised and eventually breaks

Snippet of HTML code: <div id="container"> <div id="first"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia velit ut magna ultricies. </div> <div id="second"> Blandit </div ...

htmlcss

How to use jQuery to style tables with borders

I'm just getting started with jQuery and I attempted the following: <input value="1" type="checkbox" name="mytable" id="checkbox2" style="float:left;" /> {literal} <script src="http://code.jquery.com/jquery-latest.js"></script> < ...

jqueryhtmlcsscheckboxhtml-table

Tips for displaying a message in a concealed field with jQuery

I have an input field that saves values for checking a specific condition. When the condition is false, I want to display a message. If the field is hidden, the message will not be displayed. HTML <input type="hidden" id="year1_req_fund_hidden" name= ...

javascriptphpjqueryhtml

Is your console showing an error message about an incompatible IE Document Mode?

I am encountering an issue with the following code in my jsp page. <!--[if lt IE 7]><html lang="en" class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7" xml:lang="en" xmlns:fb="http://www.facebook.com/2008/fbml"> <![endif]--> <!--[if IE 7]>& ...

javascriptjquerycsshtml

Having trouble incorporating a JavaScript snippet from Google Trends into an HTML webpage

Hey everyone, I've been trying to incorporate a JavaScript script to display Google Trends on an HTML page. I copied the embed code directly from the first image at and modified it as follows. Unfortunately, it's not working as expected. <ht ...

javascripthtml

Tips for resizing a responsive website

Is it strange to consider scaling down a fully responsive website? Our client insists that every website, including his other ones, should have a max-width of 980px like his main site. So, if the screen size exceeds 980px, how can I scale down the website ...

htmlcssangularjs

show the contents of the successful jQuery AJAX response

When using jQuery AJAX, I am retrieving values from a database and then trying to display them in a dropdown menu. Initially, I pass the ID to fetch the level. Once I have the level ID and name, I then fetch the values related to the selected level and dis ...

c#jqueryhtmlajax

Can anyone provide guidance on displaying a JS alert every time a tab in the slider is opened?

Utilizing the liquidslider script on my website, I have created a slider with the following HTML code: <div class="liquid-slider" id="slider-id"> <div> <h2 class="title">Slide 1</h2> // Content goes here ...

javascriptjqueryhtmlcss

Ensure consistency in the heights of div elements, even when the images contained within have varying heights

I created a bootstrap webpage with a row of DIVs, each containing an image. As I resize the browser window, I noticed that the height of the first two DIVs remains consistent, but the third div's height varies because the image is only 50 pixels high. ...

htmlcss

Update the anchor tag's background color when it is clicked and the href attribute is set to

Coding <div id="main_menu"> <ul> <li><a href="#">Homepage</a></li> <li><a href="<?php echo $this->url(array('controller' => 'eftrqsthead','ac ...

jqueryhtmlcsshref

Can someone guide me in altering an item within a column? I have basic knowledge of PHP, but I am not a skilled expert in the subject

Hello, I am new to coding and I have a question. I would like to make a correction in the Terminate Reason column by changing the spelling of "Resgned" to "Resigned". Can someone guide me on how to do this? Please refer to the attached image for better und ...

phphtmlsql

In order to add value, it is necessary to insert it into the text box in HTML without using the "on

example <input type="text" id="txt1" onChange="calculateTotal();" /> <input type="text" id="txt2" onChange="calculateTotal();" /> <input type="text" id="txt3" onChange="updateValue();" readonly/> <input type="text" id="txt4" onChange= ...

javascripthtml

Immersive bootstrap 4 card featuring dynamic highcharts

I am faced with the challenge of making highcharts charts adjust their height when displayed in full screen mode within bootstrap cards. Even though I received assistance from "daniel_s" in creating an example for panels, the transition to cards and additi ...

javascriptjqueryhighchartsbootstrap-4fullscreen

Difficulty positioning CSS, aligning flex-box grid with floating text

My attempt to include an aside section is causing alignment issues with the navigation menu and the aside itself. The problem seems to be related to using float:left for the 200x200 images. I want the layout to be well-positioned like the expected image. I ...

htmlcsspositionblock

Is it possible to drag and drop without using jQuery UI?

Currently, I'm developing a jquery plugin that incorporates drag and drop functionalities using HTML5 drag attributes. The functionality is working well, except for one issue - linking the function names to their designated targets. Although the func ...

jqueryhtmldrag-and-drop

Tips for concealing the loader once all pages have been loaded

Within the context of my website development project at , I am utilizing a script for infinite scrolling to consolidate multiple pages into one seamless scrolling experience. I am seeking a solution to hide the loader (the spinning icon) when no additiona ...

javascriptjqueryhtmlcssinfinite-scroll

Personalized Grid Design for Showcasing Athletic Teams

I am looking to create a custom grid layout that represents the team's Players, separated by their positions (GK, Defense, Midfielders, and Forwards), similar to the image below. The layout should also be responsive like in image 1. Currently, the re ...

javascripthtmlcssreactjs

The issue with the max-height transition not functioning properly arises when there are dynamic changes to the max-height

document.querySelectorAll('.sidebarCategory').forEach(el =>{ el.addEventListener('click', e =>{ let sub = el.nextElementSibling if(sub.style.maxHeight){ el.classList.remove('opened&apos ...

javascriptcsscss-transitions

Attempting to select an input field

I'm having trouble clicking on the Select Files button that is nested within a SPAN and Input Tag. Despite using Xpath, Id, and Name, I am unable to successfully click on the button. <span> Select <u>a</u> Files... </span> & ...

javahtmlseleniuminputwebdriver