I need your help, I face a problem with my css media query code.
I just wrote the following css media code
#media (max-width: 900px) {
#content {
width: 100%;
margin: auto;
}
#recent_activities .act {
width: 94%;
padding: 3% 10px;
background-color: #FFF;
text-align: left;
margin-bottom: 10px;
margin-left: 0px;
height: inherit;
}
#header_container
{
display: none;
}
#footer {
width: 94%;
margin: auto;
padding: 3% 0px;
text-align: center;
}
}
my problem is that the code works perfectly on the computer screen when I re-size the browser window but unfortunately it does not work on my smart-phone (Xperia Z).
Just put the following meta tag in the <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
hope that helps.
Related
Trying to make our wordpress theme responsive, starting off by adding
<meta name="viewport" content="width=device-width, initial-scale=1" />
within the header's head tags, and it has this effect on the footer...
any way of sorting this out? thank you in advance
You can not make site resposnive adding viewport to head of it.
Try with using media queries:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
AND you can use framework such as bootstrap:
https://getbootstrap.com/
You can add this code to additional CSS for now
#media only screen and (max-width: 768px) {
#footer {
float: left;
background: url(images/footer.jpg) 50% 0;
width: 100%;
height: auto;
display: flex;
flex-direction: column;
}
#footer p {
float: left;
width: 100%;
margin: 40px 0 0 0;
text-align: center;
color: #b5b5b5;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 12px;
line-height: 18px;
}
}
I'm trying to get display:none to work for smaller screens. But I can't get it to work properly. The class disappears if I minimize the screen on my computer, but not when I check my phone.
I've tried the suggested solution on stack overflow of using display:none!important; to override the display:block in the info class, but that hasn't worked either. I've also tried taking out display:block from the info class but that didn't work. I don't think I can take out the display:block in .tooltip because then it messes with the layout.
HTML:
<div class="container">
<a href="#" class="info" data-tooltip-text="Header
Content."><img src="info_button.png"></img></a>
</div>
CSS:
.info {
display: block;
position: absolute;
top: 18px;
right: 30px;
text-align: right;
margin: 0;
padding: 0;
cursor: pointer;
text-decoration: none;
white-space:pre-wrap;
}
.tooltip {
display: block;
position: relative;
left: 0;
bottom: 120%;
width: auto;
padding: 10px;
background-color: #00DCFF;
color: White;
line-height: normal;
text-transform: none;
font-size: 16px;
opacity: 0;
transform: scaleY(0);
transition: all 0.2s ease;
white-space:pre-wrap;
}
.info:hover .tooltip {
opacity: 1;
transform: scaleY(1);
}
#media screen and (max-width: 768px) {
.info {
display: none!important;
}
}
You need to include the viewport meta tag in the head of your main html file. It looks something like this
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Note that you can customize a few of the options you see in this tag.
I wrote a small web page without any functionality. When I open this page directly in a browser the white box will vertically resize with the browser. But if I run this in Meteor the white box won't get larger than 400px.
I compared all elements using the chrome tools but all css attributes seems to be identical in both versions.
To test it in a normal browser the stylesheet link must be enabled.
index.html:
<head>
</head>
<!--link href="main.css" rel="stylesheet"/-->
<body>
<div id="messages" class="relative content-box">
<div id="chat-box" class=""></div>
</div>
</body>
main.css:
body {
background-attachment: scroll;
background-size: cover;
background-color: #004269; }
.content-box {
background-color: white;
padding: 15px; }
.relative {
position: relative; }
#messages {
margin: 0;
position: relative;
min-height: 400px;
padding: 10px; }
#chat-box {
position: relative;
min-height: inherit;
padding-top: 0px;
height: 100%;
padding-left: 10px;
padding-right: 10px;
overflow-y: hidden;
overflow-x: hidden; }
html {
min-height: 100%;
position: relative; }
body {
margin-bottom: 190px;
margin-top: 112px; }
.content-box {
margin-left: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-top: 5px; }
OK, so it's because of the which is added by Meteor. This changes the size of the document height. More details can be found here:
<!DOCTYPE html> prevents me from resizing my <img>
I am having this CSS style, which i am trying to run on chrome v28, Firefox v222 and IE8:
html, body{
margin: 36px;
width: 100%;
background-color: black;
}
#media screen and (max-width: 768px){
html, body{
width: 100%;
height: 100%;
}
#page {
margin: 20px;
width: 100%;
background-color: red;
}
}
and as a markup I add:
<!DOCTYPE html>
<html>
<head></head>
<body><div id="page"></div></body>
</html>
Just want to understand why it is not changing color to red if I minimize the window.
Any Help will be great help.
Thanks
Raja
#page has no content thus it has height:0px; Try the following: (working jsFiddle)
#media screen and (max-width: 768px){
html, body{
width: 100%;
height: 100%;
}
#page {
margin: 20px;
width: 100%;
height:100%; /* set the height */
background-color: red;
}
}
As for the addition to the question - changing the background - You will have to reverse the order of the CSS like this:
<style>
html, body{
margin: 36px; width: 100%; height: 100%;
}
body{ background-color: black; } /* This should be first for the media query to override */
#media screen and (max-width: 768px){
html, body{ margin: 20x; }
body{ background-color: red; } /* When the media query is applied this overrides the previous rule */
}
</style>
I currently have a footer with 3 sections layed out as follows:
.foot1, .foot2, .foot3 { width: 33%; float: left; }
.foot2 { margin: 0 0.5%; }
I want them to change layout at 768px and 480px. At 768px, I have the following (to stack the first on top, with the #2 & 3 splitting the space underneath it):
.foot1 { width: 98%; float: none; margin: 0 1%; }
.foot2, .foot3 { width: 48%; margin: 0 1%; }
At 480px (to have all 3 stack and take up the width) I have:
.foot2, .foot3 { width: 98%; float: none; }
My problem is that at 480px and under, the widths are not being followed and are still staying at 48%. If I use 'inspect' in Chrome, I can see that the 'float: none;' is being followed, but not the width from the media-query.
Does anyone have any idea why it would choose to recognize the float declaration but not the width: 98%?
Thanks!
I attempted to reproduce the issue you are having but was unable to do so.
I believe that my test code below works as you desire. How is your code different from the below html/css?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.foot1 { background: tan }
.foot2 { background: green }
.foot3 { background: blue }
.foot1, .foot2, .foot3 { width: 33%; float: left; }
.foot2 { margin: 0 0.5%; }
#media screen and (max-width: 768px) {
.foot1 { width: 98%; float: none; margin: 0 1%; }
.foot2, .foot3 { width: 48%; margin: 0 1%; }
}
#media screen and (max-width: 400px) {
.foot2, .foot3 { width: 98%; float: none; }
}
</style>
</head>
<body>
<div class="foot1">foot1</div><div class="foot2">foot2</div><div class="foot3">foot3</div>
</body>
</html>