How come my gifs appear tiny even though I've adjusted their width to 32% each?

I am trying to display three gifs in a row, each taking up one-third of the width of the page. However, when I preview the page, the gifs appear tiny. I have set the divs to 32% each and the gifs should fill 100% of their respective div. Here is the code snippet I am working with:

<div id="3wizards" width=100% style="float:center">
  <div id="w1" width=32% style="float:left">
    <img src="wizard(1).gif" width=100%>
  </div>
  <div id="w2" width=32% style="float:left">
   <img src="wizard(1).gif" width=100%>
  </div>
  <div id="w3" width=32% style="float:right">
   <img src="wizard(1).gif" width=100%>
  </div>
</div>

This is how it looks on the page: Image showing the three wizard gifs as small. https://i.stack.imgur.com/jq136.png

(While I could remove the divs altogether, I want to keep them in case I want to add text to one of the thirds in the future. So, I would like to figure out how to make it work with the current setup for potential future use.)

htmlcss

Answer №1

Hey there Anura, take a look at this code snippet. To start off, enclose the code within a main wrapper and utilize flex to align it in the same row.

<div class="gif-wrapper">
   <div id="w1" class="gif">
     <img src="wizard(1).gif" width=100%>
   </div> 
   <div id="w2" class="gif">
    <img src="wizard(1).gif" width=100%>
   </div>
   <div id="w3" class="gif">
    <img src="wizard(1).gif" width=100%>
   </div>
</div>

CSS:

.gif-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.gif-wrapper .gif {
    width: calc(100% / 3 - 30px);
    margin: 0 15px;
}

Implement media queries for responsiveness across various devices.

Answer №2

To resolve this issue, utilize the flex property:

<div id="3wizards" width=100% style="display: flex;gap:2%;">
  <div id="w1" width=32% height=100%>
    <img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" width=100%>
  </div>
  <div id="w2" width=32%>
   <img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" width=100%>
  </div>
  <div id="w3" width=32%>
   <img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" width=100%>
  </div>
</div>

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

Fetching the entire webpage

When attempting to load a specific webpage using an iframe, I encountered the following issue: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></ ...

html

Challenges with displaying HTML website on mobile platform

Hey there! I admit that my website may not be the greatest, but bear in mind that this is just a school project page. My current issue is with the mobile view styling - the hamburger menu should replace the nav bar on smaller screens, but it's not wor ...

htmlcss

The webpage lacked the functionality of smooth scrolling

I created a website which you can view here. Check out the code below: <div id="mainDiv" class="container"> <div id="header"> <div class="plc"> <h1><a href="#"></a></h1> ...

htmlcss

The navigator's userAgent property is used to match specific handset identifications

When identifying users on specific devices, I use navigator.userAgent.match to detect certain phones. However, with Android devices, there are various tablets, phones, and set-top boxes to consider. So, my code snippet looks like this: if(navigator.userAg ...

javascriptphphtmlnavigator

Execute a function on a canvas timer using the setTimeout method

I'm having an issue with my setTimeout function in this code. I want it to call a timer function for a delay, but it's not working consistently every second. Why is that happening? <head> <script> function timer(sec) { var c = do ...

javascripthtmlcanvassettimeout

What is the best way to draw a rectangle outline in Vue.js without the need for any additional packages?

I have been attempting to craft a rectangle outline using vueJS, but so far I have not had much success. I am hoping to achieve this using only CSS, but despite my efforts, I have not been able to find a solution. My goal is to create something similar to ...

javascriptcssvue.jsbootstrap-vue

Utilizing data attributes in E2E testing for optimal results

We have decided to transition from using tag and classname selectors to data attributes in Cypress for our E2E testing. This change is intended to make the selectors more robust and less prone to breaking. Specifically, Cypress recommends using data-cy, d ...

htmljqueryreactjscypresse2e-testing

Every symbol located at the top of the <td> element

SOLVED by P. Leger: In my CSS I just modified the vertical-align property to top, which successfully resolved the issue for me I am working on creating a basic schedule system where the admin has the ability to manage users and assign them to specific dat ...

htmlcssimage

A guide to customizing nested elements in react using styled-components

Currently, I am utilizing styled components to apply styles to a child element inside a div using nested css. For a demonstration, you can view my example here const customStyles = theme => ({ root: { ...theme.typography.button, background ...

cssreactjs

Scrollbar width does not expand when hovered over

I am having trouble increasing the width of the scrollbar when hovering over it. However, I keep receiving an error in the console stating that 'scrollbar.addEventListener' is not a function. JAVASCRIPT setTimeout(function() { const scrollbar ...

javascripthtmlcss

Steps for embedding a webpage within a div element

I am facing an issue while trying to load a web page within a div using an ajax call. Unfortunately, it's not working as expected and displaying the following error message: jquery.min.js:2 [Deprecation] Synchronous XMLHttpRequest on the main thread ...

javascripthtmljquerycssajax

Arranging Multiple Files in Sequence Using HTML5 File API Instead of Uploading All Simultaneously

I am currently working on a BackboneJS/Marionette App and I want to enable users to upload multiple files. Right now, the functionality works when users select multiple files simultaneously, but I would like to give them the option to select one file init ...

javascriptjqueryhtmlfile

Selection of multiple listings

Looking for a solution to create a multi list selection area? You can double click on an item in the left list to add it to the selected area. Also, you can double click on an item in the selected area to remove it from the list. <ul id="selection"> ...

jqueryhtml

What is the best way to utilize jQuery in order to present additional options within a form?

Let's consider a scenario where you have an HTML form: <form> <select name="vehicles"> <option value="all">All Vehicles</option> <option value="car1">Car 1</option> <option value="car2">Car 2< ...

javascriptjquerycsshtml

spill the elements from one div into another div

I'm facing a situation where I have 2 divs on a page, with the first div containing text content only. The issue is that when the content of the first div overflows, it gets cut off due to the CSS applied to it: .one { overflow: hidden; width: 1 ...

javascriptjqueryhtmlcss

Personalized jQuery Slider with automatic sliding

I am currently working on creating my own image slider without relying on plugins. 1st inquiry : How can I achieve horizontal animation for the slider? 2nd inquiry : I want the images to cover both the height and width of their container while maintainin ...

javascriptjqueryhtmlcssslide

The Facebook Comments widget causes the webpage to automatically scroll to the bottom on older versions of Internet Explorer like

My webpage is quite lengthy and includes a Facebook comments widget at the bottom. However, when loading in IE7 and IE8, the page instantly jumps to the bottom due to this widget. Interestingly, removing the widget allows the page to load normally. This ...

javascripthtmlfacebookinternet-explorerloading

The transitionend event fails to trigger if there is no active transition taking place

Take a look at this: http://jsfiddle.net/jqs4yy0p/ JS $('div').addClass('switch').on('transitionend', function(e){ alert('end'); }); CSS div { background-color: red; /*transition: background-colo ...

javascriptcsscss-transitions

Stopping the WordPress gallery at the end without looping using Elementor

Is there a way to make my gallery stop at the end of the last picture without having to add any jQuery code? I inserted this gallery using elementor widgets and would appreciate your help on this matter. Additional information: Upon clicking on an image, ...

htmljquerywordpressgalleryelementor

Leveraging the power of PHP and AJAX for seamless transmission and reception of JSON data through a

I am in the process of creating a basic form that consists of a single text field and a submit button. The goal is to have the entered value posted to a $.getJSON method upon clicking the button, which will then retrieve a JSON response and display it on t ...

phpjqueryhtmlajaxjson