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
Related
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
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.
I want to make this code good for all devices. If I open it with like a smartphone, it looks very bad.
If you can tell me something to improve too, I would appreciate it!
Here is my index and stylesheet.
Thanks!
index.html:
.background {
width: 99%;
height: 100%;
}
.title {
margin-top: 9%;
color: white;
font-family: "Lucida Console", "Courier New", monospace;
}
.subtitle {
margin-top: 1%;
color: #9c9c9c;
font-family: "Lucida Console", "Courier New", monospace;
}
.socials {
bottom: 0;
}
.fa {
padding: 20px;
font-size: 30px;
width: 1%;
height: 2%;
text-align: center;
text-decoration: none;
border-radius: 50%;
}
.fa:hover {
opacity: 0.7;
}
.fa-twitter {
background: #55ACEE;
color: white;
float: left;
clear: both;
}
.fa-telegram {
background: #34abdf;
color: white;
float: left;
clear: both;
}
.github {
margin-right: 55px;
}
<!DOCTYPE html>
<html>
<head>
<title>zDoctor_ | Developer</title>
<meta name="keywords" content="Minecraft, zDoctor, zDoctor_, Telegram, Github, Doctor, doctor">
<meta name="viewport" content="width=device-width">
<meta charset="UTF-8">
<link rel="stylesheet" href="css/stylesheet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script async defer src="https://buttons.github.io/buttons.js"></script>
</head>
<body style="background-color: #262a2e" class="background">
<div class="title"><center><h1>zDoctor_</h1></center></div>
<div class="subtitle"><center><h3>Java & Web Developer(I think)</h3></center></div>
<div class="socials">
</div>
<div class="github">
<center><a class="github-button" href="https://github.com/zDoctor-Dev" data-size="large" aria-label="Follow #zDoctor-Dev on GitHub">Follow #zDoctor-Dev</a></center>
</div>
</body>
</html>
It says there is too much code and I need to add more details, but I don't know what to write ^^' so I'm just typing some random things.
One trick is to make absolutely everything relative to the viewport. That way you at least get a properly responsive site on all window aspect ratios.
Whether or not it looks OK on all sizes is something to be considered once you've done this - for a simple design, for example with lots of stuff just centered, you should not need to go into media queries.
You can't make a circle by having width in % and height in %, they are %s of different things so you won't get the underlying square you need. Think about using vmin for the units here and giving them each say 3vmin and see how it works out.
You can even define your font sizes in terms of vmin and they will adjust along with everything else (though be aware that going very very small wont work on some browsers).
So, if you find yourself using px, stop and reconsider.
Also look up more 'modern' ways of doing things like achieving centering and space filling. e.g. flex. Check that everything you are using is both standard and not deprecated. For example using HTML for formatting such as '<center'> isn't now the thing.
For the future, start thinking mobile first when you do a design - but as I say the design you have shown so far should be fine on a smaller viewport if you head for vmin.
edit your meta tag to this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
You can't simply improve like this. You have to add a meta tag for view port in HTML like: <meta name="viewport" content="width=device-width, initial-scale=1.0">In CSS you have a feature named media query like
#media screen and (min-width: /*Your size in which you want the thing to change*/930px) {
body {
/*Your command like mine is*/
background-color: black;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
background-color: red;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>
The above code will change when the size will be decreased. You have to make one for yourself. This is my tip to use query string.
I'm not even sure how to link to show the problem since webpack and React combine all the CSS into one thing.
Here is a codepen of what the site shows: https://codepen.io/livebacteria/pen/bJpRxq
Code:
<html lang="en"><head>
<meta charset="utf-8">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="/manifest.json">
<!--
Notice the use of in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<style type="text/css">body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
</style><style type="text/css">.App {
text-align: center;
}
.roomContent {
width: 85%;
}
.roomId {
width: 85%;
background-color: darkgray;
top: 0;
float: top;
text-align: center;
overflow: hidden;
}
.messageList {
margin-left: 15%;
}
#sign-in-button {
position: fixed;
left: 0;
bottom: 0;
height: 2%;
width: 5%;
background-color: red;
overflow-x: hidden;
}</style><style type="text/css">#room-list {
left: 0;
height: 100%;
width: 15%;
background-color: #797979;
overflow-x: hidden;
}
#rooms {
background-color: darkgray;
margin: .2em;
border: .2em solid black;
border-radius: .5em;
}
.active {
transition: background-color 0.2s ease-in-out;
background-color: white;
color: black;
}</style><style type="text/css">.message {
background-color: lightgrey;
}
.alter {
background-color: teal;
color: white;
}
ul {
list-style: none;
}
.username {
left: 0;
font-weight: bold
}
.msgContent {
text-align: justify;
}
.timestamp {
right: 100%;
}
li {
display: -webkit-flex;
display: flex;
}</style><script charset="utf-8" src="/main.301d260d2d5d7cc6e354.hot-update.js"></script><script charset="utf-8" src="/main.1b967c31a26f143b4c18.hot-update.js"></script><script charset="utf-8" src="/main.71fa75690276c3793425.hot-update.js"></script><script charset="utf-8" src="/main.bd4f9c2dd0d0d73a5767.hot-update.js"></script><script charset="utf-8" src="/main.674bf126f112209cc501.hot-update.js"></script><script charset="utf-8" src="/main.d51f6dd5d844ba3b041f.hot-update.js"></script><script charset="utf-8" src="/main.3b7da7fe7854caba082b.hot-update.js"></script><script charset="utf-8" src="/main.83cd193b84cfa377dad0.hot-update.js"></script><script charset="utf-8" src="/main.2a3407b574c86757e486.hot-update.js"></script><script charset="utf-8" src="/main.593394f8893e7c304918.hot-update.js"></script><script charset="utf-8" src="/main.ca86c32b9f61b8f0bb0b.hot-update.js"></script><script charset="utf-8" src="/main.8bbf712997dd0b0cc98c.hot-update.js"></script><script charset="utf-8" src="/main.8dc8d68395e79c2c6dbd.hot-update.js"></script><script charset="utf-8" src="/main.8f1d3411148d4555e4db.hot-update.js"></script><script charset="utf-8" src="/main.03f056389193af93776c.hot-update.js"></script><script charset="utf-8" src="/main.9cac50b16b883a71fef4.hot-update.js"></script></head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"><div class="App"><div class="roomListInfo"><div id="room-list"><section id="informationalHeader"><div><h1>Bloc Chat</h1></div></section><section id="rooms"><div><div class="active">room_1</div><div class="">room_2</div><div class="">room_3</div><div class="">Additional Information</div><div class=""></div><div class="">Mentor chat</div><div class="">retest</div><div class=""></div></div></section><section id="createRooms"><div><form><input type="text" id="nameEntry" value=""><input type="submit" disabled="" value="Create Room"></form></div></section></div></div><div class="roomContent"><h1 class="roomId">room_1</h1><div class="messageList"><div><div><ul><li class="username">LiveBactera</li><li class="msgContent">Testing</li><li class="timestamp">No Data</li></ul></div></div></div></div><div class="userInfo"><div><div><button>Sign Out</button><p>Tyler Poore</p></div></div></div></div></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script src="/static/js/bundle.js"></script><script src="/static/js/0.chunk.js"></script><script src="/static/js/main.chunk.js"></script><script src="/main.937734484660ad27272f.hot-update.js"></script>
</body></html>
But, my problem is that I'm trying to build a chat application / website that you know, looks like one. Perhaps like Slack of all things. I'm having major overlapping issues with different components. I want a top header bar to stay stuck to the top, a nav bar on the left side that is stuck as well and, finally, the content should be scrollable.
I don't even know where to start for CSS. I've done loads of tutorials but nothing makes sense. There feels like there is more to CSS than there is in JS. The only code that works to achieve the sidebar look I'd like to have is the position: fixed style in CSS. I've read that this can cause major issues with other /fixed/ elements and sure enough it has.
The more I mess with the CSS the worse it gets, I had to restart almost the whole project because it got so bad.
I am guessing you want roomListInfo on the left, and roomContent on the right?
Some quick fixes:
you need them to be side-by-side instead of stacked on top of each other. You could do this by making them both display: inline-block, and make roomListInfo have width: 15% to match the width: 85% on roomContent. It looks like you tried adding it on room-list instead, so you should undo that.
Next, to get roomContent to cling to the top of the "line" (cause both are now on a line, like a line of text) that both elements now exist on, instead of sitting on the bottom of it, add vertical-align: top to it.
There are different ways to solve this problem. CSS can be confusing to start out with but once you get the core concepts down (classes, Id, declarations) then this will become a lot easier.
A good tip is to separate your CSS into it's own file and then load it using
<head>
<link rel="stylesheet" type="text/css" href="YOUR_CSS_FILE_NAME.css">
</head>
I would definitely start one-by-by with this page. Don't try to do too many things at once and don't get overwhelmed.
Go through each section thoroughly before moving onto the next.
For the sample below I simulated putting the CSS into a different file, I moved it to the CSS Window and removed the Style Tags.
Then I went through and changes some of the HTML and added the appropriate styles based on what I think you are asking for.
This is just one way to solve this problem, it doesn't mean it's the best.
https://codepen.io/anon/pen/ROaZGo
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.