Exploring the intricacies of Bootstrap 4 media queries through pixel widths

I am currently working on developing a web app using Bootstrap 4 as the front-end framework. The app is primarily designed for desktop use, but I have made certain views and menus adaptable to mobile devices.

However, I have encountered an issue where the app breaks at 768px and switches to the mobile view. When testing it on my Samsung Galaxy A51, I noticed that in portrait mode everything looks fine, but in landscape mode it reverts back to the desktop version, which is not what I intended.

My smartphone has a resolution of 2400 x 1080, which raises some questions for me:

  • In portrait mode, I should have a width of 1080px on my phone, so why does it display the mobile version? (Although this is the desired outcome, I am unsure of how it is functioning this way)
  • In landscape mode, with a width of 2400px, the desktop version is displayed, which makes sense. However, since media queries in Bootstrap are based on pixels, how can I handle this situation?

I find it puzzling that responsive design is solely determined by pixels, as screen size may vary regardless of resolution. Perhaps a combination of resolution and screen size would provide a more accurate solution.

How do you approach responsive design in your projects? What methods do you find most effective for ensuring adaptability across mobile and tablet devices?

Thank you for any insights or guidance you can provide.

cssbootstrap-4responsive-design

Answer №1

If you're looking for answers to your question, feel free to check out this thread where it was previously discussed:

Media Queries: How to target desktop, tablet, and mobile?

It's interesting to note that actual device resolution doesn't always match pixel size due to advancements in technology. Physical pixels on modern devices are not the same as CSS pixels, making user interfaces more intuitive and enjoyable to use. Imagine trying to press a 20px button on a retina display if it were physical pixels - quite a challenge!

Answer №2

Another comment points out the device-pixel-ratio, which adjusts how pixels are represented on screens to accommodate high resolutions on small devices.

You can check this ratio in JavaScript by using window.devicePixelRatio. On a desktop, the value is 1, but on a phone, it may be 3, causing the device to display at a lower resolution than its actual capabilities.

My app was breaking at 768 pixels because the device was being recognized as 800 pixels wide. To fix this, I adjusted my app's breakpoint to 992px, and now it works correctly.

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

Incorporate an SCSS file into the Stackblitz project

Is there a way to include an scss file in the stackblitz? I attempted it, but encountered some issues. Could you take a look and advise me on what to do? I also made an attempt to add home.html This is the project: Check out the stackblitz project here! ...

cssangulartypescriptsassionic3

Eliminating margin space from grid columns in Bootstrap 4/5

What is the best way to implement a gutterless grid in bootstrap 4? Is there an established method for removing gutters, or does it require manual adjustments? ...

twitter-bootstrapbootstrap-4bootstrap-5

What's the reason behind the presence of the a tag before the button in this

While working with Bootstrap 4, I noticed that the a tag is being displayed before the button when using the following code. Can anyone explain why? <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar ...

csshtmltwitter-bootstrapbootstrap-4

Creating responsive HTML page text and table with the use of JavaScript

Trying to create a responsive webpage has been a bit challenging. I experimented with height,style.height, style.OffsetHeight, etc. but still struggling to dynamically make a square table. Although the code below changes the height, the table's width ...

javascripthtmlcsscordova

Tips for displaying and concealing columns in Blazor QuickGrid based on breakpoints

I encountered an issue when attempting to hide a PropertyColumn on small screens in Blazor 8 using the regular Bootstrap 5 method. By adding Class="d-sm-none d-md-block" to the QuickGrid component's PropertyColumn, it seems that the Bootstra ...

cssblazorquickgrid

h1 does not center align properly when there is insufficient text below

It seems that my h1 only aligns to the center of the screen when there is enough text underneath it. Otherwise, it doesn't align correctly or at all. How can I resolve this alignment issue? .content { margin-top: 60px; text-align: center; } bo ...

htmlcssalignmentbootstrap-4

Is there a way to deactivate or hide a button in Angular 9 when the user navigates from the current page to the previous one?

ABC page has both a "Back" and "Next" button. After clicking the "Next" button, I am directed to the XYZ page, which also includes a "Back" button. When I click the "Back" button on the XYZ page, I should be brought back to the ABC page without seeing th ...

htmlcssangular

Tips for expanding the content of a blogger page to fill the entire frame of the page

Check out this page: . Currently, the video on the page does not fill up the entire screen. Any suggestions for a solution? ...

javascripthtmlcssblogger

Customizing Image Layout with jQuery Masonry - Tips for Aligning Images

I've successfully created a jQuery masonry layout that showcases recent posts from various categories on the homepage. However, I'm facing two challenges and seeking help to address them: How do I remove the small white gaps beneath some ima ...

phpjqueryhtmlcss

Displaying text values with a colored background is a feature of the TextInput component in React Native

Seeking assistance with creating a login screen using React Native, featuring semi-transparent text input. Encountering a peculiar issue where typed text appears highlighted, even though it is not. Please see the screenshot below: (Unable to upload to img ...

ioscssreact-nativetextinput

Using Bootstrap columns within a PHP loop

I've been researching various solutions for this issue, but none of them seem to be working with my current code. Right now, my products are being displayed in a single column, but I would like them to be shown in a 3 or 4 column grid layout instead. ...

phpbootstrap-4

The functionality of smooth scrolling is not compatible with the overflow-y property

Looking to implement a smooth scroll feature, I came across an example online and tried to adapt it. Here's the code I'm working with: https://jsfiddle.net/4DcNH/144/ I've added specific conditions to the html and body elements (changing t ...

javascriptjqueryhtmlcss

Issues with inline display not being rendered properly in HTML/CSS

I've been attempting to place an image and an h1 element on the same line. After researching online, I attempted using display:inline; for both the parent div element as well as each individual element. This is my current code: <div style="displa ...

htmlcss

Enclose every line within a span tag

I'm currently exploring ways to wrap each line of content in a span. For example, suppose I have an element structured like this: .body-copy { position: relative; width: 100%; height: auto } <div class="body-copy"> Lorem ipsum dolor s ...

javascriptjqueryhtmlcss

issue with excessive content overflow

I'm working with a div structure where the outer div has the following CSS properties: position: relative; overflow: hidden; min-heigth: 450px; Inside this outer div, there is another div with the following CSS properties: position: absolute; top: ...

htmlcsslayout

The vertical menu was added, but the text did not align properly

I pasted a sidebar from a different source https://i.stack.imgur.com/jkYWz.png My goal is to have the text appear at the top of the page, similar to this example https://i.stack.imgur.com/1aR5s.png After adding this line, my text is displaying at the b ...

css

The parallax background features a sleek design with crisp white borders framing the edges

We are currently facing an issue while attempting to incorporate a parallax background on our website. The problem lies in an unwanted white border surrounding the image that can be seen at this link: https://i.stack.imgur.com/pt0Pf.jpg. Despite trying va ...

htmlcssbackgroundbackground-imageparallax

Align the inline form next to the navbar-brand in Bootstrap 4

How can I position an inline form and navbar-brand next to each other horizontally on a bootstrap 4 navbar, instead of them being vertically stacked? Below is the code I am currently using: <nav class="navbar navbar-light bg-faded"> <h1 clas ...

twitter-bootstrapbootstrap-4twitter-bootstrap-4

Combine two columns into a single table column using HTML/CSS and JavaScript with the help of Datatables

I utilize the DataTables library from https://datatables.net/ to create sortable and searchable tables on my website. However, my table becomes too wide due to the numerous columns it contains. I am looking for a way to condense the width by merging relate ...

javascripthtmlcssdatatables

What's the best way to customize the dropdown icon in Bootstrap 5?

Is there a way to customize the default icon in the Bootstrap 5 dropdown menu and replace it with a Font Awesome character? I have gone through the documentation, but it didn't provide any helpful information. I also attempted to override the CSS styl ...

csstwitter-bootstrapfont-awesomebootstrap-5