I'm fairly new to using media queries and i'm probably missing something obvious but I've had a look around stack overflow and haven't yet found my solution.
Also to note, I'm using an old phone (iPhone 4S) on Chrome browser to view my site.
When I view the site on my mobile it's the exact same as if I was to view it on my browser and hasn't took my media queries into account as the browser does when I resize it.
Note the first image is how it currently looks, I want it to look like the second image
I'll try to include the relevant code:
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
Media queries:
#media all and (max-width: 701px) {
.quote {
width: 550px;
}
}
#media all and (max-width: 551px) {
.quote {
width: 400px;
bottom: 325px;
}
nav { display: none }
header {
width: 100%;
}
.title {
display: block;
margin: 0;
padding: 35px;
text-align: center;
color: #2d2d2d;
}
.quote span { color: #2d2d2d; }
.explore span { color: #2d2d2d; }
.explore {
display: block;
border: 1px solid #2d2d2d;
}
body {
background-image: url("http://htc-wallpaper.com/wp-content/uploads/2013/10/Mountain1.jpg?8a4edc");
background-size: cover;
background-repeat: no-repeat;
}
}
I think it has. It's the font size you need to have changed. I believe some mobile devices automatically adjust your font, but it may be something you don't want. Try this:
-ms-text-size-adjust: none;
-webkit-text-size-adjust: none;
Let me know if that answers your question.
Related
i tried to style my screen size in the #media tag but the contain in my page is still not responsive at all. What can i do to make it responsive other than bootstrap? The below code is my css code that i added into my project. Thank you in advance.
#media screen and (max-width: 600px) {
body{
position: absolute;
width: 411px;
height: 823px;
left: 0px;
top: 0px;
background: #00644C;
font-family:Inter;
}
}
.container {
width: 309px;
clear: both;
}
.container input {
width: 100%;
clear: both;
}
label {
color: #FFFFFF;
display: flex !important;
padding-left: 70px;
padding-top: 10px;
padding-bottom: 10px;
font-weight: normal !important;
}
.btn.btn-block{
background: #FFFFFF;
border-radius: 2px;
}
input[type=submit] {
width: 20em !important;
height: 2em;
}
Try to add this code into your head section of your html. This gives the browser instructions on how to control the page's dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
I am having trouble with "media only screen" styling. It looks like that on my mobile phone (ip7):
My css code is like this, but it doesn't have any affect on the page look. I have put meta things in my html file:
#media only screen and (max-width: 768px) {
body {
background-image: none;
background-color: white;
font-size: 20px;
}
#katalog {
height: 10px;
}
#salon {
width: 200px;
}
}
For example orginal #katalog style looks like this
position: relative;
width:50%;
height: 700px;
border: 1px solid black;
margin-left: auto;
margin-right: auto;
I was having troubles posting the html code using 'code option' that is added here, so I think
using jsfiddle is better
My page hosted -> https://james0nerep.000webhostapp.com/#
I'm using Photoswipe Masonry Gallery plugin (WP), but when the images are double-tapped or pinch-zoomed, they get distorted.
Any idea what is causing this? It's not a plugin issue, as it works perfectly when switched to Twenty Fifteen theme. FYI, I'm using <meta name="viewport" content="width=device-width">. Anything suspicious in the below CSS I'm using?
#media screen and (max-width: 700px) {
/* basics */
#content,
#sidebar,
.endbar_left,
.endbar_right {
float: none;
width: 100%;
}
#content {
margin-left: 0%;
padding-left: 0%;
padding-top: 20px;
}
html,
body {
width: auto !important;
overflow-x: hidden !important;
}
img {
border: none;
max-width: 100%;
height: auto;
}
#header {
padding-bottom: 0 !important;
}
/* posts */
.inside2 {
padding: 0 10px 10px 10px;
}
.post {
padding-right: 3px;
}
.pics_article {
float: none;
margin-left: 0;
}
}
Thank you in advance for your help. FYI, I'm not a web developer. Someone with okay html/css knowledge. Thanks!
Just found the solution by myself! It was !important; in my img properties (not in the above-posted #media query, but in the main part of CSS) causing this distortion. Removing !important; from the below has resolved the issue.
img {
border: none;
max-width: 100% !important;
height: auto;}
I am seeing inconsistent results when using print stylesheets and #media print.
When should I use either one or both?
print.css
#rptViewer
{
display: none;
visibility: hidden;
}
#printReport
{
visibility: visible;
height: 100%;
font: small;
background: #eee;
position: relative;
margin-left: 0;
width: 100%;
display: table;
margin: 0 auto;
overflow-x:scroll;
white-space: nowrap;
overflow:visible !important;
border : solid 2px;
}
html, body
{
height:100%;
width:100%;
}
This external linking of css print stylesheet cuts of the report and just shows a scroll bar or image and does not print the entire page. If I inclued #media print in the aspx page, it prints it correctly(does not cut off the report and no image like scrollbars). What is the difference between the two approaces. Also does #media print work in all versions of IE. The client uses IE 8.
If i comment out the style type =text/css and #media print chunk, its all messed up and prints only half of the page.
I am using window.print()
This is how the Aspx page looks this
<link href="Style/print.css" type="text/css" rel="Stylesheet" media="print" />
<style type="text/css">
#media print
{
html, body
{
height: 100%;
width:100%;
}
#rptViewer
{
display: none;
visibility: hidden;
}
#printReport
{
visibility: visible;
height: 100%;
font: small;
background: #eee;
position: relative;
margin-left: 0;
width: 100%;
display: table;
margin: 0 auto;
overflow-x:scroll;
white-space: nowrap;
overflow:visible !important;
border : solid 2px;
}
body
{
background: white;
font-size: 12pt;
margin: 0px;
}
}
</style>
There are 2 approaches here: one is the external css and the other is #media print.
If I include the #media print in the aspx file, it prints like this and does not cut off the report.
I have the following CSS setup up on my site. I'd like for it to be disabled when a browser width gets narrower than 900 px, but to remain enabled when a browser width is greater than 900. Any suggestions on how I can do this?
Thanks!
.image-slide-title {
display: block !important;
height: 100%;
width: 100%;
position: absolute;
top: 1;
z-index: 2000;
font-family: "open sans";
font-size: 100%;
font-weight: 100;
margin-bottom: 100px;
line-height: 1.8;
color: #333
}
Don't forget to add the html tag for smaller devices:
HTML
put the following meta inside your page head
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
CSS
.image-slide-title {
display: block !important;
height: 100%;
width: 100%;
position: absolute;
top: 1;
z-index: 2000;
font-family: "open sans";
font-size: 100%;
font-weight: 100;
margin-bottom: 100px;
line-height: 1.8;
color: #333
}
#media screen and (max-width: 900px) {
.image-slide-title {
/* do what you want here */
display: none !important;
}
}
Honestly, if you can remove the important tag, it will be much more simpler to manage the responsive effect
I believe you're looking for media queries.
#media (max-width: 899px) {
.image-slide-title {
display: none !important;
}
}
Don't forget to do this on your html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width" />
My recommendation is to create a secondary css page for your mobile.
<link rel="stylesheet" media="screen and (min-width: 901px)" href="style.css" />
<link rel="stylesheet" media="screen and (max-width: 900px)" href="mobile-style.css" />
Then in that stylesheet have the settings specific to that.
Just you need to add media query
#media screen and (max-width: 1200px) {
.div-name {
width: max-content !important;
}
}
This usage avoid to rescale your flex system and you achieve a solid structure does not effect screen resizing