Adjusting image sizes for mobile devices using HTML and CSS

I'm going to dive right in and give you a visual representation instead of explaining it verbally.

Here's how my website appears on a browser: https://i.sstatic.net/rGvsd.png

And this is how my website looks when accessed from a mobile device: https://i.sstatic.net/EyunB.jpg

Can anyone provide me with some guidance on how to resolve this issue? I've experimented with Bootstrap and media queries, but I'm having trouble resizing the images small enough for them to sit side by side on mobile devices.

Snippet:

img.mob-img {
  width: 220;
  height: 333;
}   
@media screen and (max-width: 992) {
    img.mob-img {
      width: 100px;
      height: auto;
    }       
}
@media screen and (max-width: 600) {
    img.mob-img {
      width: 100px;
      height: auto;
    }       
}
<head>
  <title>DrinkMania - Drink or Dare</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  <meta name="robots" content="index, follow">
  <meta name="description" content="Drink or Dare! - Truth or dare developed with students in mind!">
  <meta name="keywords" content="kings, ring of fire, drinking games, drinkmania, drinking games online,student, frat, dirty pint, kings cup, drinking games online,
  app, mobile website, android, ios, reddit, scott montford, playing cards, university, party, friends, talisman webs">
  <link rel="stylesheet" href="assets/css/main.css" />
  <link rel="icon" href="favicon.ico" type="image/x-icon"/>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93h

XpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-145322216-2"></script>
  <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', '');
  </script>
</head>

Section of the body:

  <!-- Banner -->
  <section id="banner" data-video="images/banner">
    <div class="inner">
      <header>
        <h1>Drink or Dare</h1><br>
        <p id="kingCount"></p><br>
        <img id="drinks" class="mob-img" src="assets/js/games/Cards/card-placeholder.png" > OR
        <img id="wildcard" class="mob-img" src="assets/js/games/Cards/card-placeholder.png" >
      </header>
      <ul class="actions special">
        <li><a href="#" class="button primary large" onclick="drawCard()">Draw 2 Cards</a></li><br>
      </ul>
    </div>
    <a href="#one" class="more">Learn More</a>
    <video src="images/banner.mp4" muted autoplay loop playsinline></video>
  </section>
</body>

htmlcssbootstrap-4media-queries

Answer №1

I placed the image within a container using 

<div style="display:flex; justify-content:center;">
and applied max-width to the image's CSS

img.mob-img {
  width: 220px;
  height: 333px;
}   
@media screen and (max-width: 992) {
  img.mob-img {
    max-width: 100px;
    height: auto;
  }       
}
@media screen and (max-width: 600) {
  img.mob-img {
    max-width: 100px;
    height: auto;
  }       
}
<head>
  <title>DrinkMania - Drink or Dare</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  <meta name="robots" content="index, follow">
  <meta name="description" content="Drink or Dare! - Truth or dare developed with students in mind!">
  <meta name="keywords" content="kings, ring of fire, drinking games, drinkmania, drinking games online,student, frat, dirty pint, kings cup, drinking games online,
  app, mobile website, android, ios, reddit, scott montford, playing cards, university, party, friends, talisman webs">
  <link rel="stylesheet" href="assets/css/main.css" />
  <link rel="icon" href="favicon.ico" type="image/x-icon"/>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-145322216-2"></script>
  <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', '');
  </script>
</head>

<body class="is-preload">

Section of the body:

  <!-- Banner -->
  <section id="banner" data-video="images/banner">
    <div class="inner">
      <header>
        <h1>Drink or Dare</h1><br>
        <p id="kingCount"></p><br>
        <div style="display:flex; justify-content:center;">
          <img id="drinks" class="mob-img" src="https://cdn.pixabay.com/photo/2020/01/31/07/10/billboards-4807268_960_720.jpg" > OR
          <img id="wildcard" class="mob-img" src="https://cdn.pixabay.com/photo/2018/03/06/20/25/dog-3204497_960_720.jpg" >
        </div>
      </header>
      <ul class="actions special">
        <li><a href="#" class="button primary large" onclick="drawCard()">Draw 2 Cards</a></li><br>
      </ul>
    </div>
    <a href="#one" class="more">Learn More</a>
    <video src="images/banner.mp4" muted autoplay loop playsinline></video>
  </section>
</body>

Answer №2

When working with max-widths, it's unnecessary to set two different values if they are the same. For simplicity, consider setting the width at 100% with a max-width of 100px if that suits your needs. Avoid using inline CSS excessively; instead, rename the div with flex applied and consolidate your styling in one place for better organization.

   <div id="gallery">
          <img id="picture1" class="responsive-img" src="https://cdn.example.com/picture1.jpg" > OR
          <img id="picture2" class="responsive-img" src="https://cdn.example.com/picture2.jpg" >
        </div>

CSS

#gallery {
display:flex;
justify-content:center;
}

img.responsive-img {
  width: 220px;
  height: 333px;
}   
@media screen and (max-width: 992px) {
  img.responsive-img {
    width: 100%;
    max-width: 100px;
    height: auto;
  }       
}

Answer №3

Do you think this is the solution you're looking for? I ensured that it's responsive as well. I didn't utilize any of the CSS you provided because you mentioned using bootstrap.

I made some adjustments to the HTML by incorporating more div elements to achieve this outcome.

If this isn't the output you desire, please inform me in a comment, and I'll do my best to assist you further.

PS. I disabled the video since it was causing horizontal scrolling.

.image-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.image-holder {
  padding: 10px;
}
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">


<section id="banner" data-video="images/banner">
  <div class="inner">
    <header>
      <h1>Drink or Dare</h1><br>
      <p id="kingCount"></p><br>
      <div class="holder">
        <div class="image-container">
          <div class="image-holder">
            <img id="drinks" class="mob-img img-fluid" src="https://picsum.photos/200">
          </div>
          <span>OR</span>
          <div class="image-holder">
            <img id="drinks" class="mob-img img-fluid" src="https://picsum.photos/201">
          </div>
        </div>
      </div>
    </header>
    <ul class="actions special">
      <li><a href="#" class="button primary large" onclick="drawCard()">Draw 2 Cards</a></li><br>
    </ul>
  </div>
  <a href="#one" class="more">Learn More</a>
  <!-- <video src="images/banner.mp4" muted autoplay loop playsinline></video> -->
</section>


<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="50203f202035227e3a2310617e61667e61">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous">
</script>

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

Guide to including a class within an "else" statement in JavaScript

function check_empty() { if (document.getElementById('CompanyName').value == "" || document.getElementById('ContactName').value == "" || document.getElementById('Address').value == "" || document.getElementById('PhoneNumb ...

javascripthtmlcss

"putting into a state of freezing" an entry field

My <input type="text" /> element needs to stop accepting text at a certain point. However, I'm unable to change the type to type="button" for some reason. What is the best way to make my <input> element stop accepting text? ...

jqueryhtmljquery-ui

Retrieve the stylesheets located within the <head> section of an external webpage and load them onto the current page

Trying to figure out a solution, I received an interesting request from a friend. They asked for help in creating a webpage that can dynamically pull a div tag from an external page (on a different server). To accomplish this, I utilized jquery's .loa ...

phphtmlajaxjquery

A fixed-height div with scrolling capability within a bootstrap column

I am new to CSS and hoping this issue is a simple one. Imagine I have a responsive, two-column Bootstrap 3 grid layout. In the left column, I want it to always fill the height of the browser window. However, within that column, I need a scrollable div to d ...

csstwitter-bootstrap-3

Setting the height of a Bootstrap radio button

My Bootstrap radio buttons are set to a width of 200px. However, when the text inside the button exceeds this width, it wraps onto two lines leading to changes in button height. How can I ensure that all other buttons displayed scale to the same height? h ...

cssradio-buttonbootstrap-5

Trouble with activating Bootstrap panel

I have integrated bootstrap with Angular, but I am facing an issue with the panels not displaying correctly. After verifying that the files are in the correct locations,here is a screenshot of how it currently looks and this is the expected result. While ...

cssbootstrap-4

What is the best way to invoke parent component methods from a child component?

I'm struggling with a scenario where I want to call methods— _handleFirstName and _handleLastName— from the parent component <Home/>, in a child component named <NormalTextField/>. The ultimate goal is to allow the user to input text, ...

javascripthtmlreduxreactjs

Tips for creating space between flex elements in Bootstrap without disrupting the layout breakpoints

<div class="row"> <div class="col-sm-6" style="margin-right: 1px;">CONTENT</div> <div class="col-sm-6"> CONTENT</div> </div> When adding a margin to the first element, it causes th ...

htmlcssflexboxbootstrap-5

Ways to eliminate the gap between two columns within a row, where the third column begins directly after the second one, causing a significant gap

I am facing an issue with the layout of my columns within a row. I have two columns inside the row and another column outside of the first row. The problem is that the third column (col-3) starts at the end of col-1, causing a gap between col-1 and col-3 ...

htmlcssbootstrap-4

Excluding a specific category from your WordPress pagination settings

I am facing an issue with WP pagination on the post archive page where I need to exclude posts from a specific category. After adding this line of code, the pagination for page 2, 3, and so on displays the same first 10 posts: <?php query_posts(' ...

phphtmlwordpresspagination

HTML drag-and-drop setDragImage fails to show ghost image on initial drag operation

Currently, I am working on developing a drag and drop menu feature that allows users to drag an image thumbnail from one div to a canvas element. The main issue I am facing is that the source div uses a sprite for displaying its background thumbnail. As a ...

javascriptjqueryhtmldrag-and-dropjquery-ui-draggable

What are some strategies for customizing the appearance of child components within a parent component?

I have a scenario where I am using parent and child components. When I use the HTML in another component, I also apply my CSS. For example, in my parent component: HTML <div class="chips"> <p class="tags">Tag 1</p&g ...

htmlcssangularangular-components

Safari browser problem with CSS transformation

Encountering an issue on iOS devices While implementing a rotating card using the code below, everything works smoothly on various devices except for Safari browser. There seems to be a problem with both the icon and the card itself. The complication arise ...

csssafaricss-animations

Adjust the size of the background image using a media query

.logo { background-image: url(https://ofbuckleyandbeatles.files.wordpress.com/2011/01/testpattern.gif); background-size: 100%; } @media(max-width:767px) { .logo { background-image: url(https://ofbuckleyandbeatles.files.wordpress.com/2011/01/te ...

css

When the page loads, I aim to have the text perform a simultaneous fadeIn and slideDown effect

When my page loads, I am trying to make some text slide down and fade in simultaneously, but I am having trouble making it work. The fadeIn animation won't happen at all. Here is the HTML code: <div id="animate" class="landing-text& ...

jqueryhtmlcssanimationjquery-animate

Need to add background image to your React app using CSS?

I'm facing a dilemma with setting an image as a background for a div. I have included my CSS file which contains the following code: background-image: url('assets/placeholders/img-hero.jpg') center center/cover no-repeat; However, Webpac ...

cssreactjsbackground-image

What is causing the background image size to adjust when the carousel is toggled?

Can you help me understand why the background-image increases in size vertically when transitioning from url/path to url/path2? I need it to stay the same size as it toggles through all the images. What mistake am I making and how can I correct it? Snipp ...

htmlcssdebuggingbootstrap-4

Easily transform your CSS code into Mozilla-specific CSS with just a click of

Assuming I have the following CSS: border-bottom-right-radius: 20px; Is there a JavaScript library available to automatically convert it to -moz-border-radius-bottomright: 20px; when it detects a user agent that belongs to a Mozilla browser, like Firef ...

javascriptjquerycss

Switching the chosen option in the <select> element repeatedly

I have successfully set the selected value, but now I am wondering how to keep changing it continuously. Initially, my approach was to remove the "selected" attribute from all options and then add it back to the desired option. Surprisingly, this method w ...

javascriptjqueryhtml