I've been working on a page lately based on The Witcher lore, just to learn some concepts about web development and design, since I had some cool looking ideas and thought to give it a try and work on it. I've been working on media queries for responsiveness on the homepage but I can't seem to nail down the display on screens similar to Samsung Note 20 Ultra. I've tested the page on many different devices and it looks fine on the vast majority, but no matter what I've tried I cant seem to get the main "Chapters" div to be in the center of the screen for Note 20 Ultra and some other similarly-sized devices. I have used max-width queries for when resizing the window on my laptop, some conventional intervals I had people suggest me, and exact width and height for Note 20 Ultra and other devices that appear on Google Chrome's devtools in the inspector. On the devtools, the screen appears perfect for all the sizes I've made queries for, including the Note20Ultra display size, but when I open the page on my phone it looks nothing like it; the main transparent div appears very high up on the page and not in the center as the Chrome inspect window suggests.
This is the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Modern Witcher's Journal</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<script type="text/javascript" src="script.js"></script>
<!--<audio id="source" autoplay loop>
<source src="C:\Users\user\AngularProjects\The ModernWitcher's Journal\audio\pages\home-
page-theme.mp3">
</audio>-->
<div class="container">
<br>
<h1 class="homepage-title">
<img src="images/witcher-transparent.png" alt="witcherLogo"
class="witcher-transparent-logo">
The Modern Witcher's Journal
<img src="images/witcher-transparent.png" alt="witcherLogo"
class="witcher-transparent-logo">
</h1>
<br>
<div class="transparent-center-div">
<br>
<h2 class="sections-header">Chapters</h2>
<br>
<p class="sections-list">
<button class="sections-list-buttons" id="bestiary"
onClick="bestiaryClicked()">Bestiary</button>
<br>
<button class="sections-list-buttons" id="signs" onClick="signsClicked()">The
Signs</button>
<br>
<button class="sections-list-buttons" id="alchemy"
onclick="alchemyClicked()">Alchemy</button>
<br>
<button class="sections-list-buttons" id="map" onclick="mapClicked()">Map</button>
</p>
<br>
<br>
</div>
</div>
</body>
</html>
And these are the CSS queries with the size conditions based on what i found online about display sizes of different large mobile devices. The last two ones are used for Note 20Ultra(normal display and flipped horizontally). I've had problems with some devices similarly to the situation I'm currently in with Note20(and other similar sized models), but I always found a way to fix them. I don't quite get what I'm doing wrong. Thank you for your time.
#media screen and (width: 1080px) and (height: 2340px)
{
.container .transparent-center-div
{
bottom: 0;
background: rgba(0, 0, 0, 0.342);
color: rgb(228, 195, 5);
border-radius: 1cm;
margin-left: 3cm;
margin-right: 3cm;
margin-top: 60%;
padding-top: 4cm;
padding-bottom: 4cm;
position: relative;
}
.sections-header
{
font-size: 80px;
}
.sections-list-buttons
{
font-size: 65px;
}
.homepage-title
{
margin-top: 1cm;
font-size: 75px;
}
.homepage-title .witcher-transparent-logo
{
height: 50px;
width: 50px;
}
}
#media screen and (width: 2316px) and (height: 1080px)
{
.container .transparent-center-div
{
bottom: 0;
background: rgba(0, 0, 0, 0.342);
color: rgb(228, 195, 5);
border-radius: 1cm;
margin-left: 3cm;
margin-right: 3cm;
margin-top: 4%;
padding-top: 4cm;
padding-bottom: 4cm;
position: relative;
}
.sections-header
{
font-size: 50px;
}
.sections-list-buttons
{
font-size: 35px;
}
.homepage-title
{
margin-top: 1cm;
font-size: 75px;
}
.homepage-title .witcher-transparent-logo
{
height: 50px;
width: 50px;
}
}
#media screen and (width: 1080px) and (height: 2316px)
{
.container .transparent-center-div
{
bottom: 0;
background: rgba(0, 0, 0, 0.342);
color: rgb(228, 195, 5);
border-radius: 1cm;
margin-left: 3cm;
margin-right: 3cm;
margin-top: 60%;
padding-top: 4cm;
padding-bottom: 4cm;
position: relative;
}
.sections-header
{
font-size: 70px;
}
.sections-list-buttons
{
font-size: 55px;
}
.homepage-title
{
margin-top: 1cm;
font-size: 75px;
}
.homepage-title .witcher-transparent-logo
{
height: 50px;
width: 50px;
}
}
View on inspect:
View on mobile screen:
In responsive design, there is a difference between a device's screen resolution and viewport size. A mobile device's screen resolution could be 1920x1080 but its viewport size (or CSS ratio) could be 736x414px. This depends on the device. More info about viewport sizes here and here.
When writing media queries in CSS for responsive design, you should use the viewport sizes. In your case, the Note20 Ultra's viewport size is 412x883px. So your media query's max-width should be for 883px or the closest "common" resolution of 1024px. You can test your site in the browser using these size too.
Couple of other points to note:
In your code, the breakpoints are width and height instead of max-width or max-height. So they're probably not getting triggered in your mobile (the phone's navigation will reduce the screen height). It might work in your browser because you've used the exact pixel in the DevTools
In responsive development, you will probably not need to use both height and width. You will generally use only max-width with common screen sizes as breakpoints.
Related
Just starting out on html, how do I center the 'Webpage' Logo and remove margin to the right of that logo so the 'Home' can be in line to perform like a nav-bar. I added an image at the end of the code so you can look at the margin I'm trying to get rid of (don't know if that's even possible!).
……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Design</title>
<link href="q1.css" rel="stylesheet"/>
<style>
body{
margin:0;
background-color: rgb(36, 37, 37);
}
.container{
padding-top:3px;
padding-bottom:3px;
width: 100%;
background-color:#003333;
height: 50px
}
.title-box{
margin-left: 20px;
}
.title-box label{
margin: 5px;
width: 130px;
text-align: center;
color:#E0E0E0;
border-color:rgb(11, 107, 19);
border-style:double;
border-width: medium;
width: fit-content;
}
.tasks{
float: right;
}
.para{
padding-left: 8px;
margin: 0%;
background-color: #515253;
padding-top: 10px;
padding-bottom: 10px;
width: fit-content;
}
.para p{
margin: 0%;
color: #e1f2f7;
}
</style>
</head>
<body>
<div class="container">
<div class="title-box">
<label>Webpage</label>
</div>
<div class="tasks">
HOME
</div>
</div>
<div class="para">
<p>The first web page went live on August 6, 1991.
It was dedicated to information on the World Wide Web project and was made by Tim Berners-Lee.
It ran on a NeXT computer at the European Organization for Nuclear Research, CERN.
The first web page address was http://info.cern.ch/hypertext/WWW/TheProject.html.
A web page or webpage is a document, commonly written in HTML, that is viewed in an Internet browser. A web page can be accessed by entering a URL address into a browser's address bar. A web page may contain text, graphics, and hyperlinks to other web pages and files.
<br><br>
A web page is often used to provide information to viewers, including pictures or videos to help illustrate important topics. A web page may also be used as a method to sell products or services to viewers. Multiple web pages make up a website, like our Computer Hope website.
<br><br>
When you click a link provided by a search engine, you are accessing a web page. The Internet consists of millions of web pages, with more being added every day.
</p>
</div>
</body>
</html>
Add flex and align-items: center; to .container.
Remove the height on .container and use padding instead.
Remove float from .tasks and use margin-left: auto;.
Then you can adjust spacing between the a's using margin-right: on .tasks a
body {
margin: 0;
background-color: rgb(36, 37, 37);
}
.container {
padding-top: 3px;
padding-bottom: 3px;
width: 100%;
background-color: #003333;
padding: 25px 0;
display: flex;
align-items: center;
}
.tasks {
margin-left: auto;
}
.tasks a {
color: #fff;
text-decoration: none;
margin-right: 1em;
}
.title-box {
margin-left: 20px;
}
.title-box label {
margin: 5px;
width: 130px;
text-align: center;
color: #E0E0E0;
border-color: rgb(11, 107, 19);
border-style: double;
border-width: medium;
width: fit-content;
}
.para {
padding-left: 8px;
margin: 0%;
background-color: #515253;
padding-top: 10px;
padding-bottom: 10px;
width: fit-content;
}
.para p {
margin: 0%;
color: #e1f2f7;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Design</title>
<link href="q1.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="title-box">
<label>Webpage</label>
</div>
<div class="tasks">
HOME
HOME
HOME
HOME
</div>
</div>
<div class="para">
<p>The first web page went live on August 6, 1991. It was dedicated to information on the World Wide Web project and was made by Tim Berners-Lee. It ran on a NeXT computer at the European Organization for Nuclear Research, CERN. The first web page address
was http://info.cern.ch/hypertext/WWW/TheProject.html. A web page or webpage is a document, commonly written in HTML, that is viewed in an Internet browser. A web page can be accessed by entering a URL address into a browser's address bar. A web
page may contain text, graphics, and hyperlinks to other web pages and files.
<br><br> A web page is often used to provide information to viewers, including pictures or videos to help illustrate important topics. A web page may also be used as a method to sell products or services to viewers. Multiple web pages make up a
website, like our Computer Hope website.
<br><br> When you click a link provided by a search engine, you are accessing a web page. The Internet consists of millions of web pages, with more being added every day.
</p>
</div>
</body>
</html>
I am trying to make one css file for all mobile screen sizes, however on google the media query won't be recognised by smaller phone screens. It works for pixel 2 xl, iphone 6, 7 and 8 PLUS and iphone X. I'm also trying to target pixel 2, iphone 6,7 and 8 and 5 so I added min-device width to be 320 px.But the browser won't recognise any of the mobile.css code.
here is my head tag -
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SHEK LEUNG | MA</title>
<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
<link rel="stylesheet" href="/css/style.css">
<link rel='stylesheet' media='only screen and (min-device-width:320px) and (max-device-width: 850px) and (-webkit-device-pixel-ratio: 3) and (-webkit-device-pixel-ratio: 2)' href='css/mobile.css' />
</head>
CSS
.nav-button-h {
position: relative;
display: flex;
justify-content: space-between;
height: 20vh;
width: 100vw;
top: 40%;
/* left: 0.5rem; */
z-index: 100;
font-family: Helvetica, sans-serif;
font-size: 1.5rem;
}
#logo-center {
display: none;
}
.mobile-logo {
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
font-family: Helvetica, sans-serif;
font-weight: bold;
width: 1.5rem;
}
#projbtn {
align-self: center;
}
.nav-button-v {
font-size: 1.5rem;
}
.openPress {
-webkit-transform: translate3d(100vw, 0, 0);
transform: translate3d(100vw, 0, 0);
transition: transform 1s;
}
.openAbout {
-webkit-transform: translate3d(-100vw, 0, 0);
transform: translate3d(-100vw, 0, 0);
transition: transform 1s;
}
/* press page */
.press-container {
width: 100vw;
}
.img-grid {
margin-top: 6vh;
margin-left: -30vw;
padding: 1rem;
}
.press-info {
width: 70vw;
height: 47vh;
}
.fixed-wrapper {
left: 173vw;
height: 20vh;
}
.contact-wrapper {
height: 20vh;
}
.back_home {
display: block;
position: fixed;
z-index: 2;
font-family: Helvetica, sans-serif;
font-size: 1.5rem;
color: black;
background-color: white;
text-transform: uppercase;
font-weight: bold;
}
.press__mobile {
margin-left: 75vw;
margin-top: 90vh;
}
.fixed-wrapper {
top: 5vh;
}
.contactbtn {
float: left;
font-size: 1.4rem;
}
.contact-wrapper ul {
background-color: rgba(255, 255, 255, 0.829);
color: black;
margin-top: 3vh;
width: 60vw;
height: 18vh;
margin-left: -45vw;
text-align: center;
justify-content: flex-start;
padding: 1rem;
pointer-events: none;
}
.contact-wrapper a {
color: white;
}
/* about page */
.about-container {
width: 100vw;
left: -100vw;
}
this line of code is invalid:
<link rel='stylesheet' media='only screen and (min-device-width:320px) and (max-device-width: 850px) and (-webkit-device-pixel-ratio: 3) and (-webkit-device-pixel-ratio: 2)' href='css/mobile.css' />
you should add your media queries inside a css file ( probably inside your mobile.css )
#media only screen and (min-width: 320px) {
.class{
background-color: green;
}
}
In order to achieve this you will need to add the media query into the mobile.css file not on the HTML link declaration.
You need to wrap the contents of the mobile.css file with the media query; like below:
#media only screen and (min-device-width:320px) and (max-device-width: 850px) and (-webkit-device-pixel-ratio: 3) and (-webkit-device-pixel-ratio: 2) {
//contents of your mobile.css file goes here
}
The way you're doing your css is completely incorrect.
First, you have absolutely no media queries. Your media queries should simply be setup for min-width, nothing else. No max-width, nothing. Those need to be within your css file, not in the link element.
Responsive design should only and I mean ONLY be done with mobile-first dimensions using min-width media queries. As the width dimension increases beyond a certain point, then you add the next media query for the next largest width.
This is such a simple concept that I have been seen hundreds of people not understanding over the last 6-7 years. One company I worked for briefly a while back, after I came in I had to completely re-write their entire css stack to support these basic rules and ultimately fix most of the problems they were having.
I recommend looking at how Bootstrap started doing their media queries about 4-5 years ago. I'm not up to speed on what the framework is doing in the current version but they were moving in the right direction back then.
Generally, and this is purely from memory, the preferable min-width sizes are: 320px, 480px, 768px, 1024px, and 1200px. This should account for portrait and landscape modes for all mobile and tablet devices, moving up into desktop widths. Adjust as needed.
it would seem this question has been asked many times over different websites with no real "ah-ha!" answer. I'm still very new and I understand there's a million different ways to code this but I'm hoping for a very simple solution that won't require me to rewrite my code.
It's my understanding this is the inherent nature of parallax, people either have had to crop the images to make them work or have had to do very large workarounds to solve the issue that parallax inherently zooms in or messes with the dimension of the original picture, no matter the orientation on the page (in my case, I'd like to keep it on the left side of the screen, with the text on the right being the scrolling element, haven't gotten around to it but having the nav bar on the top right-half of the page is my next project).
The dimensions of the picture are 1341x2063; I've heard to people setting max-height 2063px; min-height 1341px;. Tried that, didn't work.
I threw up an imgur link for the actual picture I'm working with inside my code, here's a screenshot of what it's looking like on my end: https://imgur.com/lVrQgrQ
My html has my parallax's css inline and I'd like to keep it that way as it's easy for me to understand without having to rework a ton of items.
#charset "UTF-8";
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
button {
transition-duration: 0.4s;
background-color: #800080; /* Purple */
border: none;
color: white;
padding: 6px 38px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 8px;
}
button:hover{
background-color: #4CAF50; /* Green */
color: white;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
<!-- Adding "active" class/tag to index, for navbar -->
<link href="index.html" class=active>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="description" content="Learn about Tom Waters, English tutoring services in Seoul, resume and more.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Me | Home</title>
<!-- GOOGLE FONTS
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap" rel="stylesheet">
-->
<meta name="Generator" content="Cocoa HTML Writer">
<meta name="CocoaVersion" content="1671.6">
<style>
.parallax {
/* Image to be used */
background-image: url("https://imgur.com/a/FHtZqm7");
min-height: 600px;
/*scrolling effect*/
background-attachment: fixed;
background-position: left;
/*troubleshooting image width */
width: 50%;
height: 100%;
background-repeat: no-repeat;
background-size: auto;
}
/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed
#media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
*/
</style>
</head>
<body>
<div class="parallax"></div>
<div style="height:400px;background-color:lightgray;font-size:28px">
<center>
<nav>
<ul id="mainMenu">
<li>About Me</li>
<li>Tutoring Services</li>
<li>Resume</li>
<li>Photography Portfolio</li>
<li>Contact</li>
<li style="float:right"><a class="active" href="index.html">Home</a></li>
</ul>
</nav>
</center>
<br><br><br>
<p><center>
This is me,
<br><br>and this is a personal and professional website, designed solely by myself (as a personal project) with the aim of displaying my resume, contact information and other items in an accessible manner for interested parties to see.
</center></p>
</div>
</body>
</html>
When the background-attachment is set to fixed, it gets fixed relative to the viewport. This is to achieve the parallax effect. The browser does this while keeping the aspect ratio. So to prevent the looks of a stretched or zoomed image you can just crop your image or play around with the background-size css value.
.parallax {
background-size: 100% 65%;
}
The only setting you have to change is the second value, this will help you fix the stretchy or zoomed effect on the image, an other suggestion you might check is set background-size to cover.
Just to add, adding background-size: 'auto auto' worked for me. Having it set to 'cover' was causing a huge zoom effect. This fixed it.
the question that I have today is how do i use percentages for the font size within the divs within my nav so that those divs fit perfectly within the nav? I usually use pixels, and know how to do this using px, but I want to learn how to use percentages so that my webpage resizes appropriately in screens of different sizes.
HTML:
<html lang="en">
<head>
<title>The Broker</title>
<meta charset="utf-8">
<meta content="Real Estate Agent Toronto" name="keywords">
<meta content="Homepage of a real estate agent in Toronto" name="description">
<link rel="stylesheet" href="Styles.css">
</head>
<body>
<header>
<img src="Images/Remax80H.png">
<span class="HeadButton">Home</span>
<span class="HeadButton">Property Listings</span>
<span class="HeadButton">Sitemap</span>
<span class="HeadButton">Contact me</span>
<span class="HeadButton">About me</span>
<img src="Images/Profile80H.png">
</header>
<nav>
<div class="NavButton">
Home
</div>
<div class="NavButton">
Property Listings
</div>
<div class="NavButton">
Sitemap
</div>
</nav>
<main>
Something
</main>
<footer>
Something
</footer>
</body>
</html>
CSS:
/*
Author: Dharmesh Sujeeun
Student ID: 300-912-000
Purpose: Project for COMP213 course at Centennial College.
First Created: December 3 2016
Last Modified: December 3 2016
*/
/*
Color Palette:
*/
#font-face {
font-family: Alcubierre;
src: url(fonts/Alcubierre/Alcubierre.otf);
}
#font-face {
font-family: CaviarDreams;
src: url(fonts/CaviarDreams/CaviarDreams.ttf);
}
#font-face {
font-family: Capsuula;
src: url(fonts/Capsuula/Capsuula.ttf);
}
#font-face {
font-family: Unique;
src: url(fonts/Unique/Unique.ttf);
}
body {
margin: 0px;
padding: 0px;
font-family: "Century Gothic", sans-serif;
}
header {
height: 100%;
width: 100%;
background-color: #CBE3F9;
}
.HeadButton {
font-family: "Alcubierre", sans-serif;
color: darkslategray;
font-size: 150%;
vertical-align: 110%;
margin-left: 3%;
margin-right: 3%;
}
nav {
height: 100%;
width: 20%;
float: left;
background-color: #DFE5EA;
}
.NavButton {
position: relative;
width: 100%;
height: 100%;
background-color: #DFE5EA;
color: darkslategray;
font-family: "Alcubierre", sans-serif;
font-size: 100%;
}
main {
height: 100%;
width: 76%;
display: inline-block;
background-color: #DEFAFB;
padding: 2%;
}
footer {
height: 96%;
width: 96%;
background-color: #CBE3F9;
padding: 2%;
}
img {
padding: 0.5%;
}
well you don't need to use percentage for the font-size .
you have some other ways :
font-size:20em
or
font-size:20vw
however you may need to use media to make full responsive website.
and here's a table of all units:
em Relative to the font-size of the element (2em means 2 times the size of the current font)
ex Relative to the x-height of the current font (rarely used)
ch Relative to width of the "0" (zero)
rem Relative to font-size of the root element
vw Relative to 1% of the width of the viewport
vh Relative to 1% of the height of the viewport
vmin Relative to 1% of viewport's* smaller dimension
vmax Relative to 1% of viewport's* larger dimension
If you are overhauling your font structure, you may read up on rem. It uses font scaling which can be defined by the user (not just simple zoom) to increase/decrease font sizes. At normal zoom, 1rem = 10px. If you design your divs, etc to use rem, then it'll scale with your fonts. This feels like the opposite of what you are attempting, but might be a better approach.
UPDATE
I solved my own question. See below.
I made a site with bootstrap and additional #media queries to style the site. On the desktop it shows the mobile layout when I resize the browser, but on my phone it still loads the full width site. I am using Chrome on Nexus S.
http://conversing.ca
I've looked at posts with similar issues. Checked the viewport meta tag, handheld media tags in the HTML..
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bootstrap.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen,handheld" href="bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css" media="screen,handheld" href="style.css" />
CSS (style.css)
I added the #wrapper line I saw from another post but that didn't work either.
Wish there's a way to view dev tools on mobile.
#media handheld, screen and (max-width: 767px){
#wrapper{width: 767px;}
body {
padding-right: 0px;
padding-left: 0px;
}
.hero-unit {
margin-top:0px;
padding-left: 12%;
}
.iphone {
top: auto;
left: 0;
position: relative;
}
input,button{
width: 90%;
margin: 0 auto;
}
#footer {
margin-left: 0px;
margin-right: 0px;
padding-left: 20px;
padding-right: 20px;
}
}
I solved my own question. The fault was the iframe from domain masking with the 'noresize' tag. I couldn't edit the HTML for that, so I've disabled the feature and now you should see the mobile layout on the phone.
My initial 'guess' would be to remove "handheld, ". The "handheld" query isn't really well supported.