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">
Related
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;}
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
I have a problem with sidebar of this page. I can not make it go under in the responsive version, especially in the smartphone version. Sidebar remains attached to the contents of the left but does not wrap
This is the link for the codepen
If codepen does not work, this is the link for the website.
archive-posts-w.with-sidebar .archive-sidebar {
display: block !important;
position: relative;
top: inherit;
left: 0;
width: 100%;
max-width: 350px;
bottom: inherit;
right: inherit;
clear: both;
float: left;
}
Html there will certainly be errors because it is a copy of a source of a website wordpress.
There are a few problems here:
Your container .archive-posts-w.with-sidebar has display: table;. Change that to display: block for smaller screens (i.e. in your media query)
The CSS for the part above your sidebar should be like this (for smaller screens):
.archive-posts-w.with-sidebar .archive-posts {
display: block;
vertical-align: top;
width: 100%;
}
And for .archive-posts-w.with-sidebar .archive-sidebar you have a max-width setting of 350px, also inherited from everal other rules, so change this rule (for smaller screens) to
.archive-posts-w.with-sidebar .archive-sidebar {
display: block !important;
position: relative;
top: inherit;
left: 0;
width: 100%;
max-width: none;/* <-- this one is changed */
bottom: inherit;
right: inherit;
clear: both;
}
First add class table td in that td class="test"
td.test
{
display:block
}
#sb_instagram .sbi_header_text .sbi_bio, #sb_instagram .sbi_header_text h3
{
margin:0px!important;
}
#sb_instagram .sbi_header_text .sbi_bio, #sb_instagram .sbi_header_text h3
In that class you have 'margin: 0 0 0 60px!important;' you change that 0px
abd check the devices
http://www.responsinator.com/?url=http://www.alchimieadv.biz/ricette/&device=ipad&orientation=portrait
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.
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.