In the realm of responsive layout design, what is the recommended size for a max-width container as of 2018? My current choice is to use 1140px, which I find works well with the standard screen size of 1366px.
In the realm of responsive layout design, what is the recommended size for a max-width container as of 2018? My current choice is to use 1140px, which I find works well with the standard screen size of 1366px.
In my opinion, sticking to the standard bootstrap container sizes is a good choice. These sizes are commonly used and provide a solid foundation for web development.
Here are the recommended sizes:
xs (for phones - screens less than 768px wide)
sm (for tablets - screens equal to or greater than 768px wide)
md (for small laptops - screens equal to or greater than 992px wide)
lg (for laptops and desktops - screens equal to or greater than 1200px wide)
Therefore, I suggest using 1200px as your desktop container size.
Here are the most recent breakpoint and container suggestions based on current global usage statistics:
$breakpoints: (
xs: 0,
sm: 600px, // for mobile landscape and tablet (portrait)
md: 1024px, // suitable for chromebooks, iPad Pro (portrait), and tablet (landscape)
lg: 1600px, // ideal for most laptops and desktops
xl: 2048px // designed for screens of 2k resolution and higher
);
$container-max-width: (
xs: 480px,
sm: 960px,
md: 1280px,
lg: 1920px,
xl: 3840px
);
According to usage statistics, the most common desktop resolutions are 1366 and 1920 pixels.
View usage stats here:
Therefore, I believe that Bootstrap's default breakpoints are inadequate and propose the following adjustments to container sizes:
$grid-breakpoints: (
xs: 0,
sm: 768px,
md: 992px,
lg: 1366px,
xl: 1920px
);
$container-max-widths: (
sm: 720px,
md: 960px,
lg: 1280px,
xl: 1840px
);
EDIT: Upon further consideration, I have revised the container max-width values to better align with screen widths. While this deviates significantly from Bootstrap's defaults, it offers improved proportional design.
$container-max-widths: (
sm: 720px,
md: 930px,
lg: 1280px,
xl: 1800px
);
Below are the breakpoints as per the material guidelines:
Click here to view material design responsive UI guidelines
The layout utilizes different columns and breakpoints, outlined below:
< 480 / 4 cols / xsmall
481 - 600 / 8 cols / xsmall
601 - 840 / 8 cols / small
841 - 960 / 12 cols / small
961 - 1280 / 12 cols / medium
1281 - 1440 / 12 cols / large
1441 - 1600 / 12 cols / large
1601 - 1920 / 12 cols / large (HD desktops)
> 1920 / 12 cols / large (Retina desktops)
See image illustrating adaptive breakpoints in Material Design
I have two separate pages with navigation included in both. This way, it's easier to edit the navigation menu once instead of doing so on each page individually. However, I am now facing uncertainty on how to implement the 'active' class usi ...
Hey there, I've been experimenting with creating a responsive menu using Bootstrap, but I'm struggling with the implementation. My vision is to have a logo on the left side and a menu on the right side. Below is the concept for my menu design. ...
Seeking a solution to create a component for selecting RAL colors using Material UI's TextField and MenuItem. Each item in the menu should have a background color reflecting the RAL color it represents. However, Material UI no longer supports inline s ...
I'm having trouble with some basic CSS that uses percentages. I've labeled everything and checked my code, but it still isn't working properly. Here's the CSS code snippet: .BoxHeight { height: 100%; } #Box { margin-top: 0%; mar ...
Currently, I am working on a layout design using Bootstrap 3 that involves eight text divs. These divs have almost the same height, but some are slightly taller depending on the screen width. My goal is to arrange them into three columns on desktop and th ...
I'm facing an issue with a list of items rendered in my react component where I need to hide the 4th child of the list item. Here is the relevant html code: <div class="ExpandableContent-Content MyAccountTabList-ExpandableContentContent&qu ...
I have incorporated the JQuery TextNTags plugin into my web application. Here is the original code snippet: $.browser = { webkit: true }; $(function () { $('textarea.tagged_text').textntags({ triggers: {'!': { ...
I have primarily focused on server-side development of enterprise applications (Java EE, Spring framework). However, I am now exploring client-side technologies for better understanding (not necessarily to become an expert). I have studied HTML and CSS th ...
My issue may be small, but I am struggling to find a solution. I have a content header that is 864px wide with a background image repeated vertically and a footer image. I now have a <div> positioned over the background image and I want it to be 855p ...
I just bought this theme and I'm looking to customize it so that only three items appear in a row on the homepage instead of four. Can this be achieved with CSS or JQuery? Here is the link to the theme: Here is the link Is it possible to use CSS to c ...
Let's say I have a CSS style that looks like this: input.validation-passed {border: 1px solid #00CC00; color : #000;} The JavaScript validation framework I am using injects every input tag with a class="validation-passed". While this works fine ...
I'm a beginner in Hybrid app development, currently using PhoneGap and Jquery Mobile. In my app, I have around 10 separate pages such as login.html, index.html, search.html, etc. My query is whether I should include all JS and CSS files on each indivi ...
Why won't my image float to the left? I'm using a class called align-left with float: left but it's not working. You can see the live version at - (check out the review grid halfway down under the heading 'High customer satisfaction r ...
Looking for a way to find an element using a CSS selector in Chrome, I followed these steps: Right-click on the object Select "inspect" Right-click on the highlighted area in Chrome developer tools Choose "copy" Click on "copy selector" This is the cod ...
I have a unique problem with an HTML file that is out of my control when it comes to its content. My only option is to inject a CSS file and/or JavaScript (potentially using libraries like jQuery) into the mix. Within this HTML, there are elements that re ...
I am looking to insert text into a specific shape. The parameters I have include the font, text width, text height, and margin of the text. The text is positioned within a shape with coordinates x and y. Here is an example image: https://i.sstatic.net/Mpq ...
Trying to customize my navbar for tablet and mobile devices is proving to be a challenge. I am looking for a way to make the dropdown button take up the entire page when clicked on. It seems like JavaScript might be the solution, but I'm not quite sur ...
I am a beginner with bootstrap and I find it extremely useful. I have encountered a problem with a table I am working on. I am trying to set the width of the first column and keep it always visible, but I am having trouble achieving this. I have successful ...
I'm looking to set up a layout with 2 columns side by side. The first column should have a fixed width of 200px, while the second column should take up the remaining space on the screen. Additionally, I want the content in the second column to auto-sc ...
I'm encountering an issue with getting the lighter font weights to display correctly. Despite having all the necessary font weights installed on my computer, it seems that many fonts do not support the lighter options. What could be causing this incon ...