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.
Related
I made a responsive home design with only html and css. When I deploy it locally the responsive part works perfectly, so I sended the files to the owner of the page, but he told me that the page wasn't responsive. He deployed it locally and in fileZila but it's like there's no media queries.
This are my html head tags.
<head>
<title>Alpha</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0; minimumscale=1.0, maximum-scale=1.0; user-scalable=0;" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link href="styles.css" type="text/css" rel="stylesheet">
</head>
And here is some example of my css code, I'm not even using sass because for the project I can't use libraries (it's a pretty old page)
.navbar{
display: flex;
justify-content: space-between;
align-items: center;
background-color: #c91111;
}
.navbar button{
margin-right: 25px;
}
.navbar img{
height: 4rem;
width: 19rem;
margin: 10px;
background-color: white;
}
And at the end I have some responsive code.
#media screen and (max-width: 270px) {
.navbar button{
width: 6rem;
font-size: 13px;
}
.menu_item{
justify-content: flex-start;
width: 11rem;
height: 15rem;
}
.menu_item_4{
height: 17rem;
}
.menu_item a{
padding: 1rem;
font-size: 16px;
}
.mobile-item{
padding: 0 !important;
}
}
Here is the live example https://serviciosi.online/alpha/testhome/
Now it isn't responsive on my computer when I enter that link, even though the files haven't been changed.
Is there something I'm missing?
You Should Probably Check the file permissions and owner of the file
EX:
As the last time I used responsive CSS was quite a while ago, I'm not sure if this would impact it, but in your <meta> tag in your HTML code, you switch between using semicolons and commas to separate the elements, which is generally not advisable in coding.
If this doesn't work, have you considered using percentage-based margins in order to have it automatically adjust?
max width is 270px so it wont work on resolution greater than 270px
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.
I know there is problem related to #media screen out there but sadly it didn't worked for me.
So my style.css look like this
.left-align-item {
margin-left: 20%;
margin-bottom: 80px;
text-align: left;
}
#logo {
margin-top: -65px;
float: left;
margin-left: 20%;
}
ul {
float: right;
margin-top: 24px;
margin-right: 20%;
}
And my responsive.css
#media screen and(max-width: 1360px) {
/*GENERAL*/
.left-align-item {
margin-left: 10%;
}
/*HEADER*/
#logo {
margin-left: 10%;
}
ul {
margin-right: 10%;
}
}
And the head:
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="assets/img/icon.ico">
<link rel="stylesheet" href="assets/css/fa/css/fontawesome.css">
<link rel="stylesheet" href="assets/css/fa/css/brands.css">
<link rel="stylesheet" href="assets/css/fa/css/solid.css">
</head>
If my screen is smaller than 1360px, the left margin is not resizing from 20% to 10%. I can't quite find the problem here.
From the documentation:
Whitespace is required between a not, and, or or keyword and the following ( character. Without this the parser parses it as a different type of token. Details
Your media query needs to have a space between and and the parenthesis (:
#media screen and (max-width: 1360px) {
/*GENERAL*/
.left-align-item {
margin-left: 10%;
}
/*HEADER*/
#logo {
margin-left: 10%;
}
ul {
margin-right: 10%;
}
}
Everything seems fine, except for the order of the tags placed in the head tag. Try posting tag above title. Hope this might resolve the issue.
It might be a specificity issue. Check the order of style links, make sure responsive.css is declared after style.css
Also check your media query syntax: it must have a space between and
really new user, hope I'm posting this right.
I'm trying to get responsive HTML to work on my phone, but I'm running into really strange problems. The responsive html on my page doesn't seem to be working. Even stranger, I copied the page and the issues on that page are different, even though the code should be identical.
I am working on
http://www.nokillshelter.net/final.html
http://www.nokillshelter.net/finalfinal.html
Both should be the same code but both are not picking up the responsive CSS properly. I'd post code, but its very long at this point. Any help would be greatly appreciated.
<!DOCTYPE html>
<html lang="en-us" class="no-js">
<head>
<meta charset="utf-8">
<title>NoKillShelter Music</title>
<meta name="description"
content="NoKillShelter Music">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ================4avicons ================== -->
<!-- Standard -->
<link rel="shortcut icon" href="img/favicon.png">
<!-- Retina iPad Touch Icon-->
<link rel="apple-touch-icon" sizes="144x144" href="img/favicon-retina-ipad.png">
<!-- Retina iPhone Touch Icon-->
<link rel="apple-touch-icon" sizes="114x114" href="img/favicon-retina-iphone.png">
<!-- Standard iPad Touch Icon-->
<link rel="apple-touch-icon" sizes="72x72" href="img/favicon-standard-ipad.png">
<!-- Standard iPhone Touch Icon-->
<link rel="apple-touch-icon" sizes="57x57" href="img/favicon-standard-iphone.png">
<!-- ============== Resources style ============== -->
<link rel="stylesheet" type="text/css" href="css/style-multi-scrollnew.css"/>
</head>
<body>
<div id="thelist">
<h5>NoKillShelter Releases</h5>
<br><img id="movinglogo" src="/img/LogoNKS-Imma.gif">
<div id="songs">
<a id="Longshot" href="https://awal.lnk.to/vmjynlm">
<span>Longshot</span>
</a>
<br><a id="Sweetheart" href="https://awal.lnk.to/NoKillShelter-Sweetheart"><span>Sweetheart</span>
</a>
<br><a id="FairyQuing" href="https://awal.ffm.to/mxnkqxq">
<span>FairyQuing</span>
</a>
<br><a id="JustSeeTheCoast" href="https://awal.lnk.to/JustSeetheCoast">
<span>Just See The Coast</span>
</a>
<br><a id="BalancedLove" href="https://awal.lnk.to/BalancedLove">
<span>Balanced Love</span></a>
</div>
CSS
/* Small Devices, Tablets #media only screen and (max-width: 768px) */
#media only screen and (max-width: 768px) {
h1 {
font-size: 5.5rem;
}
#thelist {
top: 69px;
font-size: 20px;
}
h5 {
font-size: 2.5rem;
}
#movinglogo {
max-width: 17%;
top: 55px;
left: -5px;
position: absolute;
}
button {
white-space: nowrap
}
.album {
margin-left: 0%;
}
#info .content {
padding: 0 5%;
}
.block-team img.team-member {
width: 100%;
}
}
/* Extra Small Devices, Phones #media only screen and (max-width: 480px) */
#media only screen and (max-width: 480px) {
.album {
margin-left: 0%;
}
h1 {
font-size: 5.5rem;
}
#thelist {
top: 69px;
font-size: 20px;
}
#thelist button {
whitespace: inherit;
button-width: 200px;
font-size: 12px;
}
#movinglogo {
max-width: 17%;
top: 55px;
left: -5px;
position: absolute;
}
I created some social media icons on my website. My links are working fine on the desktop but nothing happens on tapping them in a mobile browser. Here is the website https://theopenbay.weebly.com and here is the code —
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa {
padding: 10px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none!important;
margin: 5px 2px;
border-radius:50%;
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-telegram {
background: #30a2e7;
color: white;
}
.fa:hover {
opacity: 0.7;
}
</style>
</head>
<body>
<!-- Add font awesome icons -->
</body>
</html>
and welcome to SO. I found the issue. The icons were blocked by the "navmobile" element. It covered the icons, so it wasn't possible to "press" the icons.
This was caused by the display block styling of that element. So by removing that you'll be able to make those icons clickable again.
your problem is, that div#navmobile is overlaping your footer, #navmobile has z-index:8, what you can do, is that you can change div#my-footer's position to relative and z-index higher than 8, here is the code (you should add to css):
#my-footer{position:relative; z-index:99}
I solved it by changing display: block to display: table which reduced the navmobile height.
Context: the images posted by Iliass Nassibane above.