I recently made new HTML document in my computer. When I share it with other comp. which has small size monitor then everything is messed!!!
I just wanted to know if I can make a code which changes the width of the items in webpage according to device width...
Then afterwards I thought to use % in width instead of pixels (px). It worked but not how I wanted it . So I still need help...
Thank you!
What you're looking for is media queries. Using media queries you can style your page using CSS based on the page max/min width.
Take a look at this for further info.
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Here is an example when a screen has a max-width of 900px and when that is applied the following CSS will be applied. Anything outside of that range will have the above CSS applied
.example {
font-size: 7rem;
width: 75%;
}
#media screen and (max-width: 900px){
.example {
font-size: 3.5rem;
width: 50%;
}
}
A website designed to change its contents according to how big (or small) the monitor or screen is designed with Responsive Design principles in mind.
Responsive designs can be achieved with CSS media queries. Check out the MDN documentation on Responsive Design here.
Related
im trying to style the page based on different phone sizes. I know that I can use media queries, but what if the width of the phone is the same, but height is different. For instance, both Iphone X and 6,7,8 has the same width, but different length
Pretty much what Carl said in his comment.
The following is a valid example:
#media only screen and (max-height: 600px) {
body {
background-color: lightblue;
}
}
To do that you should use media queries (as already mentioned).
Not only can you change stylistics according to screen max-width and max-height, but also to orientation: portrait and even aspect-ratio:.
Apart from that I think you could make css rules around the concept of relative units.
You can make whole content scalable
- not just
div { width: 20vw; }
but also
p { font-size: 5vmin; }
That way you won't need to worry about weird aspect ratios or different resolutions.
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!
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 simple pages completed that seem to respond well to different size screens. I haven't done anything fancy to achieve this - just avoided fixed sizes etc.
One page, however, has a large single word in a large font:
When I resize the browser, all other content lays out correctly, but the title word of course won't break:
What is the correct way to handle this? Is there some way to adjust the font size based on the screen width?
Another option is to use viewport-percentage lengths.
vw unit: Equal to 1% of the width of the initial containing block.
You can read more about it on CSS Tricks which discusses a repaint bug for certain browsers, but you can fix it with a little jQuery.
http://jsfiddle.net/7L9QH/
CSS
h1 {
font-size: 25vw;
}
You can use media queries like:
#media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
body {
background: #ccc;
}
}
Some more info can be found here: http://css-tricks.com/css-media-queries/
Have you tried FitText?
It is a jQuery plugin made for that occasions. Quoting their description:
FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.
I am trying to convert my website index page to be adjustable. I want the whole conent of the page to be adjustable. By adjustable I mean if some one opens the page in a new window and try to resize the window by dragging it with mouse, the content of my page also adjust itself according to the width and height of the window.
Is it possible using only CSS or I have to use some javascript as well?
What I need is something like [this][1]
Any help or advice will be highly appriciated
Thanks
What you want to do is to Responsive Design
For example you can make your css target a particular devise as:
//General css
/*MEDIA BETWEEN 300 - 1000PX */
#media all and (min-width:300px) and (max-width:1000px)
{
}
/*MEDIA BETWEEN 621 - 800PX */
#media all and (min-width:621px) and (max-width:800px)
{
}
/*MEDIA BETWEEN 300 - 620PX */
#media all and (min-width:300px) and (max-width:620px)
{
}
Some of the pages that can help are:
http://googlewebmastercentral.blogspot.in/2012/04/responsive-design-harnessing-power-of.html
http://www.onextrapixel.com/2012/04/23/responsive-web-design-layouts-and-media-queries/
NOTE: use em and % instead of px and pt
Just set relative widths on stuff, like width: 75%; or width: 60%; instead of width: 450px; or width: 650px;. This will work for you if you just need elements to get narrower/wider as the page is resized.
If you want major layout changes (like on the demo you provided, the top menu bar becomes a sidebar when the window becomes smaller), you'll need some Javascript to switch stylesheets based on the width of the window. Hope this gives you some ideas!
What you are talking about is called "Responsive Design".
A responsive site works more with percentages instead of pixels as well as something called "media-queries" in css.
There is a great article about it here:
http://www.alistapart.com/articles/responsive-web-design/