If the average / most popular screen size width is now more than 1366px, why is bootstrap widest container (from their CDN) at max-width:1170px?
.container {
max-width: 1170px;
}
Should I not believe everything I read?
This is from many sources by the way, not the first one I came across.
The underlying reason for the question is I want to design for max width desktop use - I'll worry about tablets and phones when desktop design is finalised.
About screen resolution
According to screenresolution.org, the actual most popular resolution is 1366x768, not more.
About those 1170px
For desktop display, Bootstrap use a 1170px width, with a padding of 15px on both left/right sides :
#media (min-width: 1200px)
.container {
width: 1170px;
}
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Quick calculation : (1366 - 1200) / 2 = 83.
The Bootstrap desktop layout keep (at least) a margin of 83px on both sides of your screen (98px if you count the padding). That's not that big, and it avoid the page to look congested. For a counter-example, Wikipedia use a 100% width layout, but many people think it's "too-much", it decrease readability.
What if I want to change this ?
You don't have to be worried about Bootstrap width. Of course you can change it.
Almost everything is set in percent in Bootstrap 3.
Have a look on Bootstrap customize & download page, you'll find a few variables useful :
Media queries breakpoints
#screen-xs-min: 480px
#screen-sm-min: 768px
#screen-md-min: 992px
#screen-lg-min: 1200px
Layout and grid system
#container-sm: ((720px + #grid-gutter-width))
#container-md: ((940px + #grid-gutter-width))
#container-lg: ((1140px + #grid-gutter-width))
#grid-columns: 12
#grid-gutter-width: 30px
#grid-float-breakpoint: #screen-sm-min
The Galaxy S4, for example, actually runs at 1080p. Put it in portrait mode and you'd think it would run the full desktop site, which sounds terrible when comparing that 5.5" screen with my 24" LCD for example. It seems the phone manufacturers have put in a "fake" resolution to the browser, possibly with some sort of "zoom". I would test on an actual device, or at least an Android emulator, to see what the behavior is. I usually get the correct site even though it has a high resolution.
It could be because the Bootstrap devs recognize that many developers won't have content prepared to go that large, and it's trivial to change the width.
How to change navbar/container width? Bootstrap 3
Bootstrap: how do I change the width of the container?
Related
I am looking for help in regards to a new website that I have built. I have been building Joomla sites for the last 6 months but this is my first site that I am trying to make responsive based on the media queries that I have added.
The site that I have built can be found at the following:
[http://s116169771.websitehome.co.uk/blingphones_j3/]
I have built media queries for the following sizes:
768px,
600px,
568px,
480px,
400px,
320px
What I have noticed is that I still have issues with some sizes, for example when I view the site on my Samsung S6 the max size for this screen is 640px, so this was causing me issues with a 'box' image that had used which was a png.
I have since changed this into an svg file so that it resizes in accordance to the screen size that I am on. The following is my CSS:
#media (max-width: 767px) and (min-width: 601px) {
#mainbox {
float: left;
position: relative;
background: url(../images/box.svg) no-repeat;
background-size:contain;
margin-bottom: 40px;
}
I have also made sure that the text within the boxes has a width of 100% so this resizes with the box.
The problem I now have is rather than adding more breakpoints, I need to ensure the heading on the page 'WE FIX BROKEN, DAMAGED MOBILE PHONES' resizes like how the box and the text within the box does.
Unfortunately when I am resizing the screen from 767px to 601px I notice a gap appearing under the mobile phone image and I am not sure how to fix this to be honest.
I have looked through the Firefox Developer Tools but just cant figure this out. I also have the font sizes as em and thought this would work in the same way as the svg but this isn't the case.
My current site has been built using the latest version of Joomla 3.8.4.
Would really appreciate some advice on where I am going wrong and what I need to consider to ensure when resizing the page is displayed correctly without adding any more breakpoints.
Sheraz, just to confirm the template already has the bootstrap framework as part of its build. The following is the code in my index.php file.
JHtml::_('bootstrap.framework');
I have read you question and i think the easy and best way of making a website responsive is through bootstrap. In bootstrap there are pre-defined classes you can use to make that thing responsive
For example: To make a image responsive use img-responsive class so it will resize itself according to the screen.
<img src="source" class="img-responsive" width=100% height=500px/>
Except this bootstrap contains grid system you can align them easily.
I hope this will help you
One thing that I notice with your media query styling of text inside the .boxestext1 div is that at narrow viewports, the text is too wide for the actual space, and it overflows the box.
One suggestion is that if you replace your current CSS
#media (max-width: 480px){
div.boxestext1 {
...
margin: 0 32px 0 32px;
width: 373px;
...
}
}
with something like the following, it will scale better at smaller viewports.
#media (max-width: 480px){
div.boxestext1 {
...
margin: 0;
width: 100%;
...
}
}
If you want good results on mobile you can never be too careful about hardcoding widths and other units.
Good luck!
I am building my project. I just noticed that I made a big mistake with using just pixel values in tables, sidebars etc. So it makes a problem, like if other person has different resolution in computer my website looks shapeless and bad.
Which codes I should use to apply responsive design?
As I know to use width, height values with % is useful. Also I don't know exactly how to use % values. What else I should do?
I use "rem" units to avoid problems (including the "media" max/min widths).
Consider 1rem = 16px for your desktop desing and 99.99% times everything goes well even in almost unknown devices.
https://www.w3.org/TR/css-values-3/#font-relative-lengths
EDIT: (cause the comment)
There are different things.
1.- Use "rem" to size things (like font-size: 0.875rem in spite of font-size:14px) to keep thing with adecuate proportions to the size of the pixels, 2.- Use #media queries to change layout when the screen is to wide/to narrow, that sizing can be done in rems to, so min-width 20rem means (more or less) the width of 20 "M" letters (not really true, but close).
Let say you have a 24 inchs screen with 1480px, and your friend have also 1480px, but in just 6 inchs. If you make font size 12 px you will see pretty nice, but probably your friend will find it small. The device/browser developers can define a different rem size, acording to the physical size of the device (24px, for example) and your 0.875 rem will be 21 pixels in his screen (not so small, more comfortable to see)
The change in layout to adapt to a narrow screen can be done using those rems also, so for the same 1480px he can have a more comfortable layout. You have a screen 1480/16=92,5 rems width, but he have 1480/20=74 rems width.
You can use percentage values just like you would use pixel values. If you want 1/4th of your website to be a sidebar, it can be as easy as:
.container {
width: 75%
}
.sidebar {
width: 25%
}
This wil make the container take up 75% of the browsers window. Since there is 25% space left, you could neatly fit a sidebar next to it by making that 25% width (you might need to add float:left to both elements).
However, I can image that on mobile view you would like your container and sidebar to be 100% width. You can do this by using media queries:
//medium phone size
#media screen (max-width: 425px) {
.container {
width: 100%
}
.sidebar {
width: 100%
}
}
There are several solutions:
Use media queries to your pages.
Use a CSS grid (and media queries)
Use Flexbox (and media queries)
Use an other css framework including a grid system
You can start with Bootstrap. That will not only make your site responsive but also there are many predefined designs for the HTML elements like buttons, fonts, tables etc. You will only have to use the classes.
If you are not well accustomed to Bootstrap the do as #Damian Makkink and #Marc_DNL have posted.
IMO a self-built CSS for a responsive site and design is better. Initially, in my hobby project, I started with Bootstrap but I have completely phased that out.
I have this small social network with a couple of thousand users. The thing is that it's static at 980px - which at the time was great. Now I need to redesign the website though and want to optimize it for mobiles, tablets aswell as bigger desktops.
The website itself is very complex with a unique design, so a liquid webdesign is out of the picture. I need to have a lot of control over the elements, so I choose responsive.
I'm reading a lot about the subject and read on 99designs.com, that they target 3 specific media queries:
Small: under 600px. This is how content will look on most phones.
Medium: 600px – 900px. This is how content will look on most tablets, some large phones, and small netbook-type computers.
Large: over 900px. This is how content will look on most personal computers.
I don't understand this, because if I make a page 600px wide, my phone is showing a horisontal scrollbar.
So my question is. Should I use percentages in the mobile version of the website like:
#Wrap {
width: 100%;
float: left;
}
and for the desktops (lets say for 980 px desktops):
#Wrap {
width: 980px;
float: left;
}
I really wished that if I designed a website in 600px, that it would automatically fit screens up to 600px, if I used:
#media (max-width: 600px) {
New to CSS, HTML and Java but about to finish my first website. Apologies if this has been answered before but I've been driving myself crazy for days trying to solve this issue.
I created my site in 1366 x 768 and therefore tailored the max-width/height accordingly, but since testing the site on a Macbook air (resolution 1440x900), I'm having issues with resizing and white space around the content.
I updated max-width to 1440 which seemed to have sorted the horizontal white space, but the space beneath my footer remains no matter what I do.
Is there a way to resize up and down with resolutions? Are media queries the answer or am I gonna have to go back and redesign my site?
Any help would be greatly appreciated.
You can use this style:
#media screen and (min-device-width: 1366px) {
}
I suggest you to use bootstrap grid if you are not very familiar with responsive design. Each divgets from .col-md-1 class. (The sum is equal to 12).
With this Grid System you can see the elements in each resolutions fine.
in the CSS you can add multiple #media screen sizes and set padding and margins according to the size of the device they are using. for example the website im working on at the moment has different styling for 3 different device sizes.
#media (min-width: 1366px) {
body{
width: 100%;
clear: left;
white-space: nowrap;
}
}
Something like this could be helpful
I have a div and I'm trying to figure out how to get it to occupy the same amount of screen space regardless of device display density.
For example, let's say I have two devices that are each 5 inches wide. The first display has a device-pixel-ratio=1, and the second has a device-pixel-ratio=2.
Device 1: 5 inches wide, device-pixel-ratio=1
Device 2: 5 inches wide, device-pixel-ratio=2
So the second device has twice as many pixels packed into the same space.
My div style:
.myDivStyle {
width: 100px;
height: 50px;
}
If I understand correctly, Device 2 would appear to render the div at half the width/height as on Device 1.
If that's the case, is there a way to define our width/height in a device-independent unit? Or do we have to scale all our styles manually on page load etc after we examine the device-pixel-ratio attribute?
Thank you
Redefining your css size by using em unit would be good.
Some good links in this reference. Please check these
w3.org
w3.org
css-tricks
All the above links urge that, em is best suitable in cases when you want your document to behave well on wide range of devices.
This sounds more like you need to work with percentages instead of pixels. So it will use a "percentage" amount of your screen
.myDivStyle {
width: 50%;
height: 25%;
}
It would solve the problem with the ammount of pixels. This would solve the issue if your working with the screen of an Iphone and an Android, since they use two completely different resolutions. For instance, i believe the Iphone uses 320 by .. something, while my own Samsung Galaxy uses i think 480 by something. (dunno the true values)
Most of the devices would come under the following 3 resolutions
1) HVGA-Half of VGA (320 x 240)
2) WVGA- wide VGA(800x 480) - nearly 1.5 times of HVGA
3) HVGA 2x- (640 X 960) - IPHONE 4 uses this resolution
Write seperate css files for the above three resolutions by
#Media screen and (min-width: 320px) and (max-width: 480px){
/* css files here*/
}
or
#Media screen and (min-device-pixel-ratio: 2)
{/* css files here*/
}
Do the same with other resolutions. A css class created in 1 resolution should be copy pasted in all three resolutions to get a perfect view. By this way you can showcase a perfect device specific style