Problem with incorporating responsive gifs

I'm new to CSS and I'm trying to incorporate an animated GIF as a smartphone screen using Bootstrap to ensure responsiveness. I've managed to get it working for larger and medium screens, but the issue arises when resizing for smaller displays.

For reference, here is my attempt on CodePen (https://codepen.io/anon/pen/yGddKK) where you can see the problem specifically on small screens. Additionally, I've attached a screenshot taken outside of CodePen (https://i.sstatic.net/972nr.jpg).

Below is the crucial part of the code:

<div class="container position-relative">
    <img class="gif position-absolute img-fluid d-block mx-auto my-auto" src="mygif.gif" alt="">
    <img class="img-fluid d-block mx-auto my-auto" src="phone.png" alt="">
</div>

I would greatly appreciate any insights or assistance in understanding why the display breaks on small screens. Thank you in advance!

htmlcssresponsive-designbootstrap-4

Answer №1

To fix the width of your container, try using the following code in your HTML or CSS file:

<style>
@media (min-width: 576px) {
    .container {
        max-width: 100% !important;
    }
}
</style>

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

How to conceal 'subnavigation' elements within Buddypress

Hey everyone, I've been looking into how to hide subnav items in a drop-down list. Can this be achieved using just CSS or will I need to write some code for it to work properly? My main goal is to have the sub nav items appear when the user hovers ove ...

htmlcsswordpressbuddypress

Update text displayed on radio button selection using jQuery

Is there a way to change the label text on a selected radio button from "Set default" to just "default" using jQuery? I think I need to use the class radio-default as the selector, but I'm not very familiar with jQuery. <div class="radio-default ...

javascriptjqueryhtml

Can HTML Elements be used within a Contenteditable section?

I am facing an issue with a contenteditable tag on my website. Users are unable to type code into the tag and have it display as an actual element instead of just text. Is there a way for users to input full, working HTML elements in a contenteditable box ...

javascripthtml

Is there a way to eliminate a div and all its contents from the DOM?

As I work on my web application, I am trying to implement a system where error messages can be returned via ajax upon success or failure. The ajax script is functioning correctly in terms of returning errors or successes. However, my challenge lies in com ...

javascriptjqueryhtmlcssajax

Best practices for displaying JSON in an HTML document

Struggling with implementing jQuery autocomplete in a form with a long list of names in a dropdown select tag. The current code is not functioning as expected. public function executeNew($r) { $this->getResponse()->setContentType('applicat ...

phpjqueryhtmljsonsymfony-1.4

What is the best way to align sections side by side using Bootstrap?

Hello, I'm currently trying to customize the layout of this Bootstrap webpage to resemble the design shown in this image https://i.sstatic.net/w7i6Z.png. Specifically, I want to display the blog section and the team section side by side. As a beginne ...

htmlcssbootstrap-4

Using buttons as spinners for input elements with identical styles but unique identifiers

Currently, I am in the process of developing a project that involves users. In order to display all users, I am executing a query on an SQL database. After styling the interface, I have added an input element beside each user, which initializes at zero. Ad ...

javascriptjqueryhtmlcss

The process of deleting lines from an image using Javascript

If I have an image of a data-table and I want to eliminate all the grid lines (defined as continuous vertical or horizontal pixels), is there a way to achieve this using Javascript's image data manipulation? I envision looping through a 2D array conta ...

javascripthtmlimageimage-processinggetimagedata

Tips for displaying and hiding content in Angular2

I have a component that toggles the visibility of elements by clicking a button. This is the snippet of my HTML code: <div *ngFor="let history of histories | sortdate: '-dateModified'"> <p><b>{{ history.remarks }}</b& ...

htmlangular

Is anyone else seeing a mysterious gray outline surrounding the image?

When visiting my website, I encountered an issue with the main menu. Specifically, when hovering over 'Populaire boeken', the first 2 menu items display properly with an image on mouseover. However, there seems to be a pesky grey border surroundi ...

jqueryhtmlcssborder

Having trouble getting my AngularJS directive with a number in the name to function properly

Check out my code snippet: app.directive('3dPlansSlider', function(){ return { controller: 'projectCtrl', restrict: 'E', templateUrl: 'views/3dPlansSlider.html', link: function(scope, element, attr ...

javascripthtmlangularjs

Positioned footer without predetermined height

I am having trouble with positioning the footer so that it always stays at the bottom of the page. When there is not enough content on the page, the footer does not reach the bottom as desired. Additionally, the footer does not have a fixed height. Below i ...

javascripthtmlcsstwitter-bootstrap-3

CSS Image Placement

If I have an image with a width of 2000px, where the snazzy design aspect is located about 600px in and spans about 900px. My goal is to use this image as the background for a website, ensuring that the snazzy design remains centered even when stretching t ...

css

Steps for implementing overflow scroll on a div with an unspecified height

The layout I'm working with looks like this: .page { width: 360px; height: 704px; border: 1px solid red; } header { height: 10%; width: 100%; display: flex; align-items: center; justify-content: center; background-color: lightblue; } ...

javascripthtmlcssoverflow

BlendModeGlobal operations

Experimenting with the globalCompositeOperation property in a loop by passing different strings (source-atop, source-over, etc.) to the same 2D context, I observed that Firefox only allowed me to draw a few shapes while Opera only displayed the last one. ...

javascripthtmlcanvas

Nest Bootstrap columns with rows aligned to the right

Trying to design a front page layout for a takeout restaurant. Encountering an issue where the last row doesn't align properly due to a double-height element. Here is the code snippet: <div class="row"> <a class="col-md-3 img-box img-h ...

htmlcsstwitter-bootstrapnestedalignment

Certain browsers have difficulty running CSS keyframes animations

As I work on my website, I have integrated a CSS keyframes animation that is triggered by clicking a link connected to a JavaScript function. Here is an excerpt from my CSS file: #banner { background-color: #00BBD2; position: absolute; width: 100%; heigh ...

javascriptjqueryhtmlcssanimation

Share your hefty files through an online portal

What is the most effective method for allowing users to upload large files from their web browsers to a server? We are talking about file sizes of 200MB or even up to several gigabytes. I have brainstormed some potential solutions to this issue, although I ...

htmlhttpfile-upload

Can the HTML attributes produced by AngularJS be concealed from view?

Is there a way to hide the Angular-generated attributes such as ng-app and ng-init in the HTML code that is output? I want to present a cleaner version of the HTML to the user. Currently, I am using ng-init to populate data received from the server, but ...

javascripthtmlangularjs

Issues with Bootstrap's center-block functionality

I'm having trouble centering the navigation in my WordPress template that uses Bootstrap. I've tried using the center-block class on different elements, but the menu items are still aligning to the left. I even created a custom class in my custom ...

htmlcsswordpresstwitter-bootstrap