When the screen width falls below 768px, the columns should expand to full

Currently, I am using Bootstrap 3.3.7 for my project.

I'm facing an issue where my images are not extending to full width when the viewport size is between > 630px and < 768px. The images have a width of 400px, which works fine for sizes > 768px.

If I increase the width to 800px, the images fit within < 768px, but then they become too large for sizes > 768px.

Is there a way to maintain the current width but ensure that the images expand to full width within < 768px?

You can view a demo version here.

htmlcsstwitter-bootstrap

Answer №1

Add the following CSS style:

@media (max-width: 768px) {
  img {
      width: 100%;
    }
}


/* Styles for Cards and Buttons */

body {
  background-color: #f5f5f5;
}

div {
  background-color: #fff;
}

.index-content a:hover {
  color: black;
  text-decoration: none;
}

.index-content {
  /*margin-bottom: 20px;*/
  /*padding: 50px 0px;*/
}

.index-content .row {
  margin-top: 20px;
}

.index-content a {
  color: black;
}

.index-content .card {
  background-color: #FFFFFF;
  padding: 0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

.index-content .card:hover {
  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
  color: black;
}

.index-content .card img {
  width: 100%;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  height: 350px;
}

.index-content .card h4 {
  margin: 20px;
}

.index-content .card p {
  margin: 20px;
  opacity: 0.65;
}

.index-content .blue-button {
  width: 100px;
  -webkit-transition: background-color 1s, color 1s;
  transition: background-color 0.5s, color 0.5s;
  min-height: 20px;
  background-color: #002E5B;
  color: #ffffff;
  border-radius: 4px;
  text-align: center;
  font-weight: lighter;
  margin: 0px 20px 15px 20px;
  padding: 5px 0px;
  display: inline-block;
}

.index-content .blue-button:hover {
  background-color: #dadada;
  color: #002E5B;
}


/* Media Queries for Grid Elements */

@media (min-width: 768px) {
  .card {
    position: relative;
  }
  .card-content {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
  }
  .card-content h4,
  .card-content p {
    color: white;
    width: 100%;
    float: left;
    margin: 0 0 5px;
  }
  .card-content a {
    float: right;
  }
  .index-content .card h4,
  .index-content .card p {
    padding: 15px 20px;
    margin: 0;
  }
  .index-content .card p {
    padding: 0 20px 15px;
    margin: 0;
  }
}

@media (max-width: 768px) {
  img {
    width: 100%;
  }
}

.margin_bottom {
  margin-bottom: 10px;
}

.row [class*="col-"] {
  padding-right: 5px;
  padding-left: 5px;
}

.row {
  margin-left: -5px;
  margin-right: -5px;
}

.card-img-bottom {
  color: #fff;
  height: 20rem;
  background: url(images/img1.jpg) center no-repeat;
  background-size: cover;
}
<!-- Include Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-sm-4 margin_bottom">
      <img src="http://placehold.it/400x510" alt="5" class="img-responsive" />
    </div>
    <div class="col-sm-4">
      <div class="row">
        <div class="col-xs-6 col-sm-12 margin_bottom">
          <img src="http://placehold.it/400x245" alt="5" class="img-responsive" />
        </div>
        <div class="col-xs-6 col-sm-12 margin_bottom">
          <img src="http://placehold.it/400x250" alt="5" class="img-responsive" />
        </div>
      </div>
    </div>
    <div class="col-sm-4 margin_bottom">
      <img src="http://placehold.it/400x510" alt="5" class="img-responsive"></img>
    </div>
  </div>
</div>

Answer №2

<div class="container"> <div class="row"> <div class="col-sm-4 margin_bottom"> <img src="http://placehold.it/400x510" alt="5" class="img-responsive"></img> </div> <div class="col-sm-4"> <div class="row"> <div class="col-xs-6 col-md-12 col-sm-12 margin_bottom"> <img src="http://placehold.it/400x245" alt="5" class="img-responsive"></img> </div> <div class="col-xs-6 col-md-12 col-sm-12 margin_bottom"> <img src="http://placehold.it/400x250" alt="5" class="img-responsive"></img> </div> </div> </div> <div class="col-sm-4 margin_bottom"> <img src="http://placehold.it/400x510" alt="5" class="img-responsive"></img> </div> </div> </div>

Make the adjustment in your HTML code by adding col-md-12 or use media queries to achieve the desired layout. Here's an example using media queries:

@media (max-width:767px){.col-sm-12 img{width:100%;}}

Answer №3

When implementing a min-width: 768px media query, you can easily incorporate the following CSS rule to ensure it functions properly under 768px:

.img-responsive {width:100%;}

If you prefer not to interfere with bootstrap's preexisting classes, you have the option to create a custom class and assign it to each image.

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 process for utilizing an SVG path as a favicon?

I am interested in using an SVG as a favicon, but I do not want to reference it as a separate file like this: <link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml"> Instead, I would like ...

htmlcsssvg

HTML: Image not updating despite meta tag refresh

I am using the following HTML5 code to display an HTML page with an image (1.JPG). The setup is working correctly, but I am encountering an issue. The image at the specified path is supposed to be randomly replaced with a newer image within a certain tim ...

html

Ways to restrict a function to a single DOM element using either its id or class

This script is responsible for dynamically loading pages on my website. It works fine, except that it currently iterates over all anchor tags a on the site, whereas I want it to iterate only through my navigation menu. Here is the navigation menu: <div ...

javascriptjqueryhtmlajax

What is causing the role="status" attribute to malfunction?

I'm having an issue with the role="status" attribute in my code. When using a screen reader, the paragraph text doesn't get read once it's appended to the body. index.html: <!DOCTYPE html> <html> <head> <title> ...

javascripthtmlaccessibility

Having trouble getting an Angular directive to bind a click event to an external element?

I've been working on creating a unique custom event for toggling with Angular. The directive I'm using is called toggleable. It may sound simple at first, but the tricky part is that I want to be able to use any button or link on the page for to ...

javascripthtmlangularjsangularjs-directiveangularjs-scope

Sending an image via email using a highly limited HTML interface

I am working on setting up a webpage connected to my company's internal Intranet page that is specifically designed to allow an iPad to take a picture and then email the picture using our webmail application. The current HTML code I have only allows m ...

htmliosimageemailsafari

Problem with Submitting Form using Search Bar

I've tried everything, but I can't seem to get this search form to submit. <div id="search_bar_container" style="z-index:99999"> <div class="container"> <form action="tour-list-search-results.php" method="post" name="searc ...

javascripthtmlcss

Navigating up and down effortlessly using bootstrap

My webpage has a collapsible form located near the bottom, but when it's opened users must scroll down to see all of it. Is there a way to automatically scroll down when it's opened and then scroll back up when closed? Take a look at my code: & ...

javascriptjqueryhtmltwitter-bootstrap

What is the best way to set inner text using jQuery?

The code snippet below demonstrates a specific issue: <span id="test1">some text</span> <span id="test2">some text</span> Upon loading the content, the following JavaScript is executed: alert($('test1').text(); $(' ...

jquerycss

Preventing the elements within a div section from shifting position

I am facing an issue with a div section that contains multiple <a href=""> tags. When I shrink the div section on the page, the contents move when a user tabs into it. Is there a way to lock the div section so that its contents do not move? For exam ...

htmlcssstylesheet

Guide on fetching and parsing JSON data in jQuery by utilizing a URL

As a newcomer to jquery, I am struggling to understand and parse the json format. In my icenium project, I have included this JavaScript function in my js folder but it doesn't seem to be functioning properly. $(document).ready(function () { ...

javajqueryhtml

I am facing an issue with Recharts not occupying the full width in my Nextjs/Reactjs project. Despite setting it to 100% width, it does not behave as

I am currently working with Recharts in combination with Next.js and Tailwindcss. I decided to create my own barchart by copying a code snippet from Recharts, but encountered an issue where changing the height to aspect worked fine, however setting the wid ...

javascripthtmlcssreactjsnext.js

Displaying or concealing dropdown menus based on a selected option

My goal is to have a drop-down menu in which selecting an option triggers the display of another drop-down menu. For example, if I have options like "Vancouver," "Singapore," and "New York," selecting Vancouver will reveal a second set of options, while ch ...

javascriptphphtmlcss

Tips for expanding the content of a blogger page to fill the entire frame of the page

Check out this page: . Currently, the video on the page does not fill up the entire screen. Any suggestions for a solution? ...

javascripthtmlcssblogger

Reducing URL query parameters

In my application, I have a variety of filtering options that users can use to narrow down their search results. For example: <input type="checkbox" name="filters[1][]" value="4" /> Filter 1-4<br /> <input type="checkbox" name="filters[1][] ...

phphtmlmysqlurl

To see website changes, refreshing with Ctrl + F5 is necessary in the browser

I have a simple website that uses only HTML and CSS. Whenever I upload new files to the site, they do not appear in the browser until I perform a hard refresh by pressing CTRL + F5. Does anyone have any suggestions on how to fix this issue? ...

htmlcssrefresh

When multiple input fields with an iterative design are using the same onChange() function, the specific event.target.values for each input

I'm in the process of developing a dynamic select button that adjusts based on the information entered into the iterative input fields I've set up. These input fields all utilize the same onChange() function. for (let i = 0; i < selectCount; i ...

htmlreactjstypescript

Adjust the size of a Div/Element in real-time using a randomly calculated number

Currently, I am working on a script that is designed to change the dimensions of a div element when a button on the page is clicked. The JavaScript function connected to this button should generate a random number between 1 and 1000, setting it as both the ...

javascripthtmlcss

What is the best way to vertically center a caption when an image is being hovered over

I'm facing an issue with aligning my caption vertically inside a div when hovering. The image within the div is larger than the div, and I want the caption to be at the center of the div. HTML <div class="container-fluid"> <div id="pag ...

htmlcsscentering

Have you ever wondered how to disable a tooltip in React Material UI after clicking on it? Let

I am working with a Material-UI tab component and I would like to include a tooltip feature. The issue I am facing is that the tooltip does not disappear when I click on the tab. It should hide after clicking on the tab. Currently, the tooltip remains vi ...

javascripthtmlcssreactjsmaterial-ui