Hi my website width doesn't show up normally in mobile, so the website looks too small. The normal width is supposed to be 375, but it become 980. I have no idea why? since I only use materialize and my SCSS doesn't hard code any width. I don't have any clue to get start. Wish to get some help. Thank you.
.brand-logo {
margin: 0 10px 0 10px;
}
.YellowtailLogo {
font-family: 'Yellowtail', cursive;
}
.brand-logo img{
height: 28px;
position: relative;
margin-right: 10px;
top: 3px;
}
.h1Landing {
font-family: 'Yellowtail', cursive;
color: #ee6e73;
}
.msg_page_container {
height: 100%;
position: fixed;
width: 100%;
overflow: hidden;
left: 0px;
padding: 0 10% 0 10%;
.collection {
overflow: scroll;
height: 40%;
}
.msg_input_div{
}
}
use media query to change content-width to width of mobile screen:
#media screen and(max-width:375px){
html,body{width:100%;
box-sizing:border-box;
}
}
and include
<meta name="viewport" content="width=device-width, initial-scale=1.0">
in CSS
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'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 was looking for many posts here on stackoverflow, but there was nothing, what could help me. Maybe this question is trivial, but i don't know how to do that, because I am beginner in this
So i have some header, where is logo, menu and some title -that is not problem. Under this header i have div with class slider, where i want to have some background-image and on this background-image i want to have some button and title and another image. And here is finally my question.
What should i do, if i want to have this background-image of this div on full width and with auto height (height from end of header to end of screen) for any screen resolution on desktop?
I mean: if i have resolution 1920x1080 i want to have this bg-image from end of header to end of screen. Same thing for resolution for example 1366x768 etc etc...i hope you understand my question.
Example on this
image
Header is red. And i want to have bg-image (in this case white part of image, but i want to have image there) auto resize for any screen resolution.
I really hope you understand my question and someone can help me.
Really thanks for any reply
http://jsfiddle.net/YKY4t/
I have some errors in code so please...
Code:
#import url(https://fonts.googleapis.com/css?family=Quicksand:400,300,700);
body {
margin: 0;
padding: 0;
}
.mainheader {
width: 100%;
height: 10%;
background-color: #ff5959;
position: absolute;
}
.mainheader img {
max-width: 100%;
height: auto;
margin-left: 20%;
margin-top: 1.5%;
float: left;
}
.title {
position: absolute;
margin-top: 1%;
margin-left: 22%;
font-size: 35px;
font-family: 'Quicksand', sans-serif;
color: #ffffff;
}
.meta {
position: absolute;
margin-left: 18%;
margin-top: 3%;
font-size: 19px;
font-family: 'Quicksand',sans-serif;
font-weight: bold;
color: #ffffff;
}
.nav {
position: absolute;
right: 20%;
margin-top: 1%;
font-size: 19px;
font-family: 'Quicksand', sans-serif;
font-weight: bold;
}
.nav li {
list-style-type: none;
float: left;
}
.nav li a {
color: #ffffff;
text-decoration: none;
display: block;
margin-left: 25%;
}
.slider img {
background-image: url(../img/slider-image.png);
background-repeat: no-repeat;
background-position: center center fixed;
background-size: cover;
}
As i commented, you can use media queries for the different screen sizes where you can use different resolution images. In that case:
#media all and (min-width: 1920) {
.img-holder img{
background-img: url(../img/slider-image.png);
}
}
#media all and (min-width: 1366) {
.img-holder img{
background-img: url(../img/slider-image-medium.png);
}
}
You can use them to use all screen resolutions you want to cover.
You alse can use any responsive framework like Bootstrap which responsives the images.
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've been trying to create responsive website template for myself, I'd like to do it mostly from scratch.
I haven't been able to get the header to size consistently.
I have what I've written here:
header {
background: #222;
height: 60px;
line-height: 60px;
transition: top 0.2s linear;
width: 100%;
overflow: hidden;
text-align: center;
}
.hidden-header-fixed {
top: -60px;
position: fixed;
}
.visible-header-fixed {
top: 0px;
position: fixed;
}
.visible-header-abs {
position: absolute;
}
#logo {
display:inline;
font-size: 30px;
color: #eee;
text-transform: uppercase;
letter-spacing: -1px;
font-weight: bold;
font-family: 'Lato', sans-serif;
text-align: center;
width: 200px;
}
#logo:hover {
color: #aaa;
text-decoration: none;
}
.menu-button {
height: 40px;
width: 40px;
background: #eee;
display:inline;
float: right;
margin: 10px;
border-radius: 20px;
}
In context at: http://jsfiddle.net/7mc3oczp/
When I view the page on my phone though it looks like this:
The header is much too small here to use. I see other sites with a header that has a constant height translate very well to my mobile's browser, how is this accomplished? Why is mine zoomed so far out?
There are two options for doing it.
You can write your own code using media queries for different devices, at first check it, list out your break point & change code for that portion. It's very tedious and time consuming process.
You can do it using framework. It's easier to manage responsiveness using twitter bootstrap, it's easy to learn. Check http://getbootstrap.com and then modify your code using there format.
Did you try to add scale factor to your page?
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" >