Strange occurrence with Bootstrap when the screen width is less than 480px

My website is working perfectly on desktop and larger screens, but when I try to view it on screens smaller than around 480px, the body width seems to shrink down.

The issue worsens as the screen size decreases. You can see an example screenshot here: https://i.sstatic.net/lKrLP.jpg

Due to the extensive CSS and the combination of multiple files, I'm not sure which code snippet to share here.

If anyone could take a look at my website and help identify the problem, I would greatly appreciate it:

Thank you for any assistance provided.

cssbootstrap-4

Answer №1

Here are some important corrections:

  1. The width: 100%; property for the img with class .badgeback should not be commented out. The image needs to have a width of 100%.
  2. .badgehead and .badgetext currently have a fixed width of 390px, which exceeds the viewport width. Consider using percentages for width, such as width: 100%; for both elements.
  3. The left value for .badgehead and .badgetext is set to 249px;, causing them to protrude excessively. Adjusting the value to 180px; would prevent this issue from occurring.

It is recommended to apply changes based on specific screen sizes using media queries for the second and third corrections.

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

Tips for organizing nested form rows with Bootstrap 4

I am currently working on a nested form row and I am looking to align the form fields vertically. The current output I am getting is shown below: https://i.sstatic.net/NEWGY.png Here is the code snippet: <link rel="stylesheet" href="https://maxcdn ...

htmlcsstwitter-bootstrapbootstrap-4

NativeScript GridLayout not rendering as expected

Issue with NativeScript Screen Layout I have been attempting to design a screen in NativeScript, but I am encountering some complications. Initially, I aimed to replicate the following screen: https://i.sstatic.net/tfa7w.png Despite following the recomm ...

cssnativescript

Styling background images in Angular 4 with ngFor loop

I am having trouble with using background image URLs. I have an array of image URLs, how can I incorporate them into the background image URL? <div class="col-lg-3 col-md-3 col-sm-6" *ngFor="let course of courses"><a> </a><div c ...

javascriptcssjsonangular

I am looking to use selenium to separate functions based on css selectors - how can this be achieved

I am attempting to modularize my script by breaking it down into various functions for easier reuse. However, when I do so, selenium seems to have trouble locating CSS selectors. Here is my folder structure: Startup.py Webdriver folder Contains init.p ...

csspython-2.7seleniumfirefox

When it comes to adjusting the height of an element, there are two ways to go about it: using $(element).height

function adjustHeight(){ var headerHeight=$(element).find('.header').outerHeight(); console.log(headerHeight); var temp=$(window).height()-headerHeight; console.log(temp); $('.users ...

javascriptjqueryhtmlcss

Tips for choosing a specific P tag within a div tag in a hierarchical structure

How can I target the second <p> within the second <div> using CSS? Is there a way to create a hierarchy with CSS selectors? Please see the code snippet below: <!DOCTYPE html> <html> <head> <style> p:nth-of-type(2) { ...

htmlcsscss-selectors

Issue with HTML form not updating MySQL database with PHP

Oh no, this PHP situation is really confusing me! I've been at it for a month now and this is the kind of challenge I thought I would face four weeks ago. Sigh! I keep getting an "Undefined index" warning, and the database is updating with a date of ...

phpmysqlhtmlcss

Styling your Vuetify V-data-table with CSS

Struggling to add extra spacing between table rows, despite inspecting the page and verifying that my styles are not being overridden. Have read other Vuetify posts on applying CSS but still no luck. Any suggestions for why I can't style my table as d ...

cssvue.jsvuetify.js

What steps should I take to transform this into a :nth-child css selector that is dynamic?

Currently, I am designing a diamond grid system using CSS. I am facing an issue where I need to shift the 5th block to the left and then every 7th subsequent block after that (12th, 19th, 26th, etc). Is there a way to create a dynamic nth selector for th ...

csscss-selectors

Halt the CSS transition on the preceding element

I tried to pause a CSS transition and came across a question with a solution that seems similar: Is there a way to pause CSS transition mid-way? However, I couldn't make it work for my code. I suspect the issue lies with the before element. What cou ...

javascripthtmlcss

What are some ways to incorporate Chakra UI with the after pseudo-class to generate a dark overlay in my video's foreground? (Specifically in the Hero section)

I am working on creating a layer effect in front of a video using Next.js and Chakra UI. I have provided an example in Figma: https://i.sstatic.net/aqIHk.png Here is the code snippet: function Hero() { const videoRef = useRef(); useEffect(() =& ...

cssreactjsnext.jshtml5-videochakra-ui

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

Change the selection box to a checkbox

I am struggling to retrieve the value of a selection box inside jQuery. Specifically, I need to access the selection box value within a function that triggers on a checkbox change event: This is what I have so far: $('input').on('change& ...

javascriptjqueryhtmlcss

The sidebar is not automatically adjusting its height to match the height of the content

The initial appearance of the sidebar can be seen here: https://i.sstatic.net/epGgs.png When the content fits the original page size, everything looks fine: https://i.sstatic.net/Sfxhb.png However, once the columns are stacked on top of each other, the s ...

htmlcssresponsive-design

arranging divs consecutively in a responsive design

Here is some sample HTML and CSS code: <div class="section group"> <div class="col span_1_of_3"> <div id="busqueda"> content </div> This is column 1 </div> <div class="col span_1_of_3"& ...

htmlcssresponsive-design

The Tailwind CSS file has been generated without any variables included

While utilizing Tailwind with a PostCSS configuration that generates a CSS file for production, only the necessary CSS classes are included in the file. However, upon inspecting the CSS file, I came across numerous empty CSS variables that seem unnecessary ...

cssvue.jstailwind-csspostcsstailwind-3

Having a negative position while using overflow auto can cause the element to disappear from

My current issue arises when utilizing negative positioning (e.g. top:-20px) within an absolute div while adding overflow:auto to the parent div. The text becomes hidden in all browsers. Unfortunately, due to the structure of my application, it is not fe ...

htmlcss

MDL Tab loading Problem

When visiting my website at this link, which is powered by MDL from Google, there is a troublesome issue that occurs. The #harule tab briefly appears before disappearing. This tab should actually be hidden on the page until a user clicks on the harule tab ...

javascriptjqueryhtmlcss

Automatically updating the JavaScript content on a webpage without having to refresh the entire HTML page, based on the changing

Is there a way to adjust the opacity change rate of my nav bar automatically without the need to refresh the page? The current opacity change rate is based on the width of the window, but once the page is loaded, adjusting the width does not affect the rat ...

javascriptjqueryhtmlcss

Unique and responsive grid styling with CSS

Is it possible to create a responsive grid like the one shown in the image below? I attempted to use absolute positioning for all blocks, but I'm having trouble making it responsive... I should note that the styling will be generated dynamically usi ...

cssgridresponsive