I was searching about how to make your webpage fits any screen resolution and I found that most answers prefer using % over Pixels. I found that this is correct when I viewed the code of this website http://zcsfestival.com/
you can find objects overlap in mobile resolution or when you don't maximize the window of your browser. However, when I read the code of this site http://m3adikawmia.eb2a.com/?ckattempt=1
I found that it uses Pixels and it fits any screen resolution also when I restore the browser window down. It seems perfect. I became confused about that and I want any clarification about this point.
Thanks in advnace,
One way is to define elements with % . But some times the elements will be to small in mobile resolution that it is necessary to define different CSS codes for different resolutions. Like this:
normal situation:
.container {width: 1000px;}
responsive:
#media only screen and (max-width:800px) {
/* redefining some element sizes like the example: */
.container {width:100%;}
}
And this way will continue till mobile resolution.
Related
I have written some HTML and CSS for a website, and some media queries to reformat the code when the screen shrinks. This works on browsers, when I shrink the browser window size, but isn't working on mobile devices. Can anyone think of why? See the Media CSS below:
#media screen and (max-width:500px) {
#education-table td {
display: block;
text-align: center;
}
}
Thanks in advance!
I have looked at similar issues and thus added the "screen and", but this has not fixed the issue.
Update: I am testing the code on a pixel 7. When resizing the browser to the same width as my phone it works perfectly. I have ensured my phone width is indeed below 500px. TO clarify, this code works when used on a browser where I have both emulated a pixel 5 (through dev tools on edge) as well as just resizing the browser window. However, when I load the same site on my pixel 7 (and a pixel 6a, + Samsung galaxy a30) this CSS does not kick in, and it loads the standard "desktop" CSS styling - so the columns of tables do not collapse and are impossible to read
This code is valid CSS and works like intended. It just applies to devices with screens smaller than 500px. I would recommend you to set the size to something higher like 768px.
The screen and just ensures that the style is only applied to normal screens and not the print-view or anything else.
As others mentioned, your code is correct and should work on mobiles, it just depends on their screen size.
If you want to reformat your layout for mobiles in portrait orientation independently of their screen width, you might want to consider the following:
#media screen and (orientation: portrait) {
#education-table td {
display: block;
text-align: center;
}
}
Solved it!
I needed to add this line to the HTML document -->
It was not linking the device width before I added this meta tag. Thanks for the help from you all
I was making a website, with this HTML and CSS files :
https://pastebin.com/Ldh12gt7 for HTML
https://pastebin.com/8igc0DXm for CSS
It renders perfectly on my browser, and also renders perfectly on other browsers, but on my PC.
My resolution is 1920x1080, and the website is shown there https://i.imgur.com/OOnhDSa.png
But, when a my friend tries to load it on a 1680x1050 resolution, the website appears to be like this https://i.imgur.com/gmSgAPx.png
How can I fix this? I already tried to this in many ways.
First, I setted all width and height with percentages.
Then, I used normalized.css(no effect, so I removed it).
So, I tried to set font-size with various values(vw, vh, ch, em etc. etc.) but didn't work.
Finally, I tried to catch user's resolution with #media and set zoom value: it worked but I can't do it for every resolution that exists.
Oh, also, my friend tried to set his resolution to 1920x1080, but nothing changed.
You should use media queries as:
Change the *value* accordingly.
To configure the CSS for the smaller screens then yours:
#media only screen and (min-width: *value*) {
.class_name{
//new CSS property
}
}
To configure the CSS for the larger screens then yours:
#media only screen and (max-width: *value*) {
.class_name{
//new CSS property
}
}
After that, you can check the responsiveness and view of your webpage on the different screen size devices using this application
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
Website slider is not working properly, when the screen resolution 1920 x 1200, slider image looks fine. when the screen resolution size like 1366 X 768 slider is cut left and right side, its not reduce automatically. is it any way we rectify this issue. website link is given below
http://www.newtonclients.com/testing/index6.html
Some script is calculating the size of images in slider, and it isn't works well. I think it is probably based on window height, but should be just based on full width.
I think you should disable this script and just use .img-responsive Bootstrap class. Actually you can use Bootstrap carousel module, which is easier to implementation and for sure less bugy ;)
I will also improve this site experience, it looks very "heavy" and even scrolling cuts the screen.
To make it responsive, by default slider is moving it towards left by adding high value of margin-left. Which leads to your issue.
You can try fixing it by overwriting default css by your own. Add below snippet to your css file. And you can change the margin value and width as per your preference.
This will stretch image little bit. Hope this works.
#media only screen and (max-width: 1366px) {
.ms-slide .ms-slide-bgcont img{
margin-left:-100px!important;
width:126%!important;
max-height:auto!important;
}
}