I am creating a webpage using only CSS & HTML
Everything looks fine until I zoom in. Once I zoom in the letters start to flow out of the div.
How do I fix this ?
Your problem has to do with responsive webdesign. By default people create there website for there own screens. But not everyone has the same screen resolution or viewport etc as you have.
The solution:
Media queries:
With media queries you can alter you css code when the user has a different resolution/viewport or is resizing there screen.
#media (max-width: 979px) {
.h2 {
font-size: 10px;
}
}
This will change the font of a the h2 tag to 10px when the screen width of the user is smaller then 979px. I will provide you with a link to a w3Schools page so you can see what kind of attributes the #media rule has.
Media queries w3cschools
tip:
You can see your resolution by opening the chrome developer tools and resizing your browser.(left top corner)
If you have any future questions please let me know I will explain some more about media queries.
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 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
So I have a site, and I use developer tools. And view it as iPhone5s view and add media queries in:
#media (max-width: 640px) {
.example {
background: red;
}
}
But when I drag my browser I can see all the elements look normal/good. Then they all mess up and cross over one another. Then it hits the mobile view and goes normal again because of my media queries. How do I get the elements to keep in there positions. Like not lose the margins at the side and all that?
I've set alot of elements to
position: absolute;
And so I can freely move elements about the page is this why?
Thank you!
I came across this while looking something up for media queries. always like learning new things and couldn't find anywhere on the net to explain this type of markup. this is from Expedia's responsive web design shown by litmus.
https://litmus.com/scope/z1xdodxbzane
#media only screen and (max-width: 600px) {
*[class="FlexWidth100"]{width:100% !important; height:auto!important; line-height:normal!important;}
Basically
*[class="FlexWidth100"]
is just same with
.FlexWidth100
selector
* or called as wildcard in CSS. This is use for select all elements within the DOM.
So basically, your code will target all elements with class FlexWidth100 in the DOM and apply
{width:100% !important; height:auto!important; line-height:normal!important;}
when the screen's width is less than or equal to 600px
It's a css selector which targets all element on the .html page with the class .FlexWidth100.
This is a responsive cascading style sheet, that basically says the following in plain english:
#media only screen and (max-width: 600px) {
Target all screen media (laptop screen, desktop screens, smartphones and tablets
screens)
Then it says, if and only if the max width of the webpage is 600px, then apply
the following styles, such as {width:100% !important; height:auto!important;
line-height:normal!important;}
You can add any styles you want under there, such as:
#media only screen and (max-width: 600px) {
*[class="FlexWidth100"]{color: green;}
This technique is generally used to target screens with different sizes; you might not want to write a single style sheet for every media type or screen size; you write one style sheet then, within that same style sheet, you specify different styles for different media types and screen sizes.
So, when I am looking at your website from a desktop, it looks one way, but when I look at the same website, from a mobile device for instance, it looks a different way.
Hope that helps also, try looking at Facebook from your desktop or laptop, then look at it on your mobile device and you'll see that it looks different.
Finally, to see if a site is using a responsive style sheet, look at it from a wide screen, like desktop, then hold one corner of the browser and slowly re-size the browser window to a smaller screen size, and you'll see different styles being applied to that webpage instantly only if that site is using a responsive style sheet.
Hope this helps mate!