utilize the bootstrap grid on mobile devices

When viewing in full screen, I prefer not to use the grid layout and instead display 7 images in a specific arrangement: 2, 2, 2, 1. However, when it comes to mobile view, how can I achieve this?

<div class="col-xs-6">
   <img src="banner1.png" alt="" class="banner-img">
</div>
<div class="col-xs-6">
   <img src="banner1.png" alt="" class="banner-img">
</div>

The HTML above looks good for desktop but is there a way to make it display as 2, 2, 2, 1 on mobile devices? Any suggestions?

<div class="container banner">
      <img src="banner1.png" alt="" class="banner-img">
      <img src="banner2.png" alt="" class="banner-img">
      <img src="banner3.png" alt="" class="banner-img">
      <img src="banner4.png" alt="" class="banner-img">
      <img src="banner5.png" alt="" class="banner-img">
      <img src=banner6.png" alt="" class="banner-img">
      <img src="banner7.png" alt="" class="banner-img">
    </div>
htmlcssbootstrap-4bootstrap-grid

Answer №1

To customize your banner for mobile screens, you'll need to modify the CSS code. Utilize the @media rule in CSS to specify the width of the banner for smaller devices. Here's a functional example:

.banner {
  background-color: blue;
  text-align: center;
  vertical-align: middle;
  width: 100%;
  padding: 15px;
}

.banner-img {
  margin-top: 30px;
  margin-right: 10px;
  width: 200px;
  height: 200px;
}

@media only screen and (max-width: 600px) {
  .banner-img {
    width: 150px;
  }
}
<div class="banner">
  <div class="container banner">
    <img src="http://via.placeholder.com/60x60" alt="" class="banner-img">
    <img src="http://via.placeholder.com/60x60" alt="" class="banner-img">
    <img src="http://via.placeholder.com/60x60" alt="" class="banner-img">
    <img src="http://via.placeholder.com/60x60" alt="" class="banner-img">
    <img src="http://via.placeholder.com/60x60" alt="" class="banner-img">
    <img src="http://via.placeholder.com/60x60" alt="" class="banner-img">
    <img src="http://via.placeholder.com/60x60" alt="" class="banner-img">
  </div>
</div>

By adjusting the banner width according to screen size, you can create an optimal viewing experience. Have fun customizing!

Answer №2

It seems like you have identified the solution yourself 

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" ></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
  <style type="text/css">
   img{
    border:1px solid black;
   }
  </style>
</head>
<body>
  <div class="container banner">
    <div class="row">
      <div class="col-xs-6">
        <img src="http://via.placeholder.com/150x150" alt="" class="banner-img">
      </div>
      <div class="col-xs-6">
        <img src="http://via.placeholder.com/150x150" alt="" class="banner-img">
      </div>
      <div class="col-xs-6">
        <img src="http://via.placeholder.com/150x150" alt="" class="banner-img">
      </div>
      <div class="col-xs-6">
        <img src="http://via.placeholder.com/150x150" alt="" class="banner-img">
      </div>
      <div class="col-xs-6">
        <img src="http://via.placeholder.com/150x150" alt="" class="banner-img">
      </div>
      <div class="col-xs-6">
        <img src="http://via.placeholder.com/150x150" alt="" class="banner-img">
      </div>
      <div class="col-xs-6">
        <img src="http://via.placeholder.com/150x150" alt="" class="banner-img">
      </div>
    </div>
  </div>
</body>
</html>

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

An HTML component experiencing a problem with font-size display

Currently, I'm encountering an issue with the font size in my PDF report when rendering an embedded HTML component using the following Java code: Snippet of my Java code : StringBuilder htmlBody = new StringBuilder(""); htmlBody.append("<p class= ...

htmljasper-reportsexport-to-pdf

Troubleshooting problem with CSS aligning <dl> and <dd> tags

Utilizing <dt> and <dd> typically assumes a single line definition for dd. However, in my scenario, I have multiple entries for the definition that I need to correctly display (the exact method will be clarified after reviewing the attached ima ...

htmlcss

CSS fluid layout with three columns

I am attempting to create a 3-column layout where each column has a fluid width of 33% and height of 50%. However, when I add padding to the columns, it causes the last div to move to the next line. How can I resolve this issue? Example HTML: <div id= ...

htmlcssfluid-layout

Modify the font color within a JavaScript countdown

I'm trying to create a timer that changes the font color of a div with the ID "clear" at the one-minute and two-minute marks. However, I'm having trouble getting it to work properly. var ho1 = document.getElementsByTagName('ho1')[0], ...

javascriptcsstimercolors

Tips for truncating a long string on Firefox for a responsive design

Can someone help me figure out how to display a 2-line image text below? Sample Image This is what it looks like in Chrome, but unfortunately, it doesn't work in Firefox. I came across a website that has a tutorial for Chrome: https://css-tricks.com/ ...

javascriptjqueryhtmlcss

I require integrating another element alongside this button

I am trying to create a button component that, when clicked, will display another component along with it. However, I am unsure of how to achieve this. Take a look at the plantioComp return - this is the component that I want the button to trigger. <t ...

javascripthtmlvue.js

Sorting outcomes based on HTML file

Attempting to narrow down results based on certain criteria within a large HTML file. Unsure if my query is attainable, but it never hurts to inquire. Currently immersed in a browser game featuring a vast map measuring 100x100, with each pixel representing ...

htmlvb.nethtml-agility-pack

Is there a way to maintain scroll position on a dynamically refreshing div?

After searching for hours, I still can't find a solution to my problem. I am using a simple JQuery script to refresh a div and display my PHP output in it. $script = " <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery ...

javascripthtmlajaxscroll

Display or conceal section based on selected checkboxes

I'm currently working on a JavaScript script that involves showing/hiding elements based on radio button and checkbox selections. The goal is to reveal a hidden section when certain checkboxes are checked, as illustrated in the screenshot below: http ...

javascripthtml

Issue with displaying PDF files on Google Chrome due to a software glitch

Recently, I encountered a puzzling issue on Google Chrome. I am not sure if the error lies with Google or within my code. When I set the div as display: none; and then show it again, the PDF view only shows a grey background. However, if I zoom in or out, ...

javascriptcssgoogle-chromepdf

Do not include undesired tags when using Beautifulsoup in Python

<span> I Enjoy <span class='not needed'> slapping </span> your back </span> How can "I Enjoy your back" be displayed instead of "I Enjoy slapping your back" This is what I attempted: result = soup.find_all(&apos ...

pythonhtmlweb-scrapingbeautifulsoup

Browsing a container with JavaScript

I am attempting to display one div at a time and scroll through them repeatedly. I found and modified a Fiddle that works as intended, but when I try to implement it on my own test page, the divs do not scroll as expected. Here is the Fiddle example: http ...

javascriptjqueryhtml

step-by-step guide on transferring the text content of an HTML paragraph element to another HTML paragraph element through JavaScript in ASP.NET

I'm looking for help with passing the text value from one HTML paragraph element to another when a JavaScript function is called. The function loads a div element with an enlarged image and a paragraph content. Below is the code I am using: JavaScrip ...

javascripthtmlasp.net

Troubleshoot: Why is the Chrome Extension content script failing to prepend to the body

Currently, I am developing a content script for a Google Chrome browser extension that inserts a horizontal bar at the top of any webpage visited by the user. The issue arises when visiting google.com as Google's navigation bar covers my bar. Here is ...

jquerycssgoogle-chrome-extension

What is the best way to create an element that is clickable but transparent in appearance?

Is there a way to achieve an inset box shadow on elements like an iframe without blocking clicks on the element itself? The common strategy of overlaying a div over the iframe achieves the desired visual effect but unfortunately hinders interaction with th ...

htmlcss

Aligning input and submit fields perfectly in the same line

Struggling to get an input form and submit button to align perfectly in Firefox and Safari. Any advice? Here's the current CSS for the 'Keep in touch' widget on www.landedhouses.co.uk: form.mc4wp-form p{margin-left:0px !important; display: ...

htmlcss

The loading bar animation doesn't begin at a blank slate

I'm currently working on a project that utilizes Django for the backend and Bootstrap for the frontend. I have to admit, I am quite inexperienced when it comes to front-end development; JavaScript seems like magic to me. One of the key features I nee ...

javascriptbootstrap-4

"Delving into the World of CSS and Live Content

ERROR: Couldn't get my CSS right, completely unrelated to dynamic content! The answer provided is quite enlightening though! I am generating tags and adding content with the help of handlebars: Here's the Handlebars code snippet: {{#each docs} ...

javascripthtmlcssdomhandlebars.js

Prevent touching the pseudo content of an element

My issue involves a toggle button component where I have utilized the ::before pseudo class to add text. The problem arises when clicking on the text within the toggle button causes the button's state to change. How can this be prevented? Here is the ...

htmlcssangularionic2

Header unresponsive to user interactions

Hey everyone! I'm new to using Foundation and I've hit a roadblock in my code on a medium-sized device. I would greatly appreciate your input to help me identify my mistake. Below is the snippet of my code: <div class="row"> <div cl ...

htmlcsszurb-foundation