I thought like it is overlapping media queries issues but I didn't find any media query which overlaps.
I resize the width of menucontainer and searchcontainer but didn't work.
I thought it was that searchcontainer which has more size in padding,I tried to decrease and increase the padding value of searchcontainer but it didn't work.
4.When I click on 'Toggle device toolbar' it is not showing any dislocation of this three container(searchcontainer,contactcontainer and menucontainer) but when I remove 'Toggle device' option that time on chrome view it is dislocated their positions.
This dislocation occurs in between 786px to 771px width.
I want both side same view and this view can be supported all devices including desktop, tablets .
Click here to understand my code
Here is my code
`
#media only screen and (min-device-width : 768px) and (max-device-width : 768px), (min-width: 768px) and (max-width: 768px) and (orientation: landscape) {
.MenuContactContainer {
max-width: 100%;
width: 100%;
vertical-align: top !important;
padding-right: 0px;
text-align: center !important;
}
.MenuContact {
margin-bottom: 0px;
margin-top: 0px;
vertical-align: central;
padding-right: 10px;
font-weight: 400;
font-size: large;
text-align: center !important;
}
.search-container {
width: 102% !important;
display: inline-block;
height: 55px;
margin-left: 0px !important;
}
.Hamburger {
z-index: 257;
width: 465px;
height: 41px;
padding-bottom: 4px;
margin-left: 16px;
margin-right: auto;
margin-top: -53px;
position: relative;
border-color: transparent;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
background: transparent url(../images/hamburger.png) no-repeat center center;
background-size: contain;
}
.searchtextbox {
height: 32px;
background-color: #EAB640;
padding-left: 10px;
margin-top: -2px;
margin-bottom: 18px;
vertical-align: middle;
width: 270px;
margin-left: 32px;
}
}
`
How can I solve this issue? Please me find out that issue.
This is dislocation of three components are here.
This is showing in 'Toggle device' mode which is right position.
Related
I am a bit confused here... I found some common breakpoints to use for my css media query but am only using max-width such as #media screen and (max-width: 812px) {} etc but it seems to be moving my other media queries around. I thought that this should only affect the code that is 812px or less. Do I need to add both a min-width and max-width to solve the issue ?
#media only screen and (max-width: 50em) and (orientation: portrait) {
label {
width: 100%;
display: block;
position: relative;
}
.nav {
width: 200%;
}
#nav-icon {
font-size: 28px;
line-height: 50px;
padding-left: 1em;
color: #ffffff;
background-color: #f44336;
}
div.nav ul, div.nav li, label{
line-height: 50px;
margin: 0;
padding: 0 2em;
list-style: none;
text-decoration: none;
color: #000;
font-weight: 100;
width: 150%;
position: relative;
font-size: .9em;
}
div.header2_welcome h1{
text-align: center;
font-family: 'Pacifico', cursive;
font-size: 1em;
position: absolute;
top: 5em;
left: 0em !important;
text-decoration: none;
white-space: nowrap;
}
img.pc101 {
width: 20em;
height: 7em;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;
top: 27em;
margin-left: -15em;
font-size: .8em;
}
div.natural {
font-size: 150px;
position: relative;
right: .5em;
top: 2em;
animation: drop 2s ease forwards;
margin-bottom: 1em;
}
div.flat {
font-size: 150px;
position: relative;
left: 1200px;
bottom: 450px;
top: 8em;
}
div.treble_clef {
font-size: 100px;
position: relative;
right: 400px;
bottom: 400px;
}
div.crotchet_rest {
font-size: 6em;
position: relative;
left: 100px;
bottom: 800px;
}
div.crotchet {
font-size: 6em;
position: absolute;
left: 3.5em !important;
top: 3em;
animation: drop 2s ease forwards;
}
div.minim {
font-size: 6em;
position: absolute;
left: 1.5em;
top: 2em;
animation: drop 2s ease forwards;
}
}
This is only a sample of my code but don't know it is moving my other media queries around..
I think the following code will help you.
<style>
#media only screen and (max-width:768px) and (min-width:200px)
{
/* Your CSS Code */
}
</style>
The media query may have a lots of condition
only for screen of less than 500px
#media only screen and (max-width:500px)
only for screen between 200px and 500px
#media only screen and (min-width:200px) and (max-width:500px)
only for screen more than 500px
#media only screen and (min-width:500px)
only for screen on every size
#media only screen
only for print on every size
#media only print
only for sqare screen
#media (aspect-ratio: 1/1)
only for sqare screen
#media (aspect-ratio: 1/1)
only for screen of aspect ratio superior to : 16/9
#media (-max-aspect-ratio: 16/9)
ecc.. you can specify pixel-ratio or dpi to better fit your need
On the page https://sport-print.online/sample-page/ I have a little button "Сравнить". I'm trying to adapt it using the CSS code:
#media only screen and (max-width: 1920px), only screen and (max-device-
width: 1920px) {
.compare
{
right: -500px;
top: -720px;
width: 70px;
height: 30px;
line-height: 20px;
padding: 0 10px !important;
padding-right: 20px !important;
padding-bottom: 10px !important;
}
}
#media only screen and (max-width: 1024px), only screen and (max-device-
width: 1024px) {
.compare
{
right: -300px;
top: -320px;
width: 70px;
height: 30px;
line-height: 20px;
padding: 0 10px !important;
padding-right: 20px !important;
padding-bottom: 10px !important;
}
}
Only the first part of the code works for width in 1920px. The second part of the code does not work. When the resolution is changed, the button position is not switched. Prompt please in what my error? Please correct my code.
Problem solved, the top and right properties do not affect position: static;
It was necessary to specify position: absolute; or position: relative; in the #media properties. Operating code:
.compare
{
width: 70px;
height: 30px;
line-height: 20px;
padding: 0 10px !important;
padding-right: 20px !important;
padding-bottom: 10px !important;
}
#media only screen and (max-width: 1920px), only screen and (max-device-width:
1920px) {
.compare
{
position: absolute; /* или position: relative;*/
right: -500px;
top: -720px;
}
}
#media only screen and (max-width: 1024px), only screen and (max-device-width:
1024px) {
.compare
{
position: absolute; /* или position: relative;*/
right: -300px;
top: 700px;
}
}
I've got a full page width image under the nav bar which will then have the title heading placed over it.
The thing is I cannot seem to figure out how to always have it dead centre no matter the size of the page. At the moment when the page is fully open, the title is in the middle, however upon resize the text goes down.
Any ideas?
<div class="row">
<div id="header-image">
<img src="images/header2.jpg" alt="header" class="img-responsive">
<div class="row">
<div class="col">
<h2 class="text-center">About Us</h2>
</div>
</div>
</div><!-- end header image -->
</div><!-- end row -->
#header-image{width: 100%; height: auto; margin-top: 50px; position: relative; min-height: 200px; }
#header-image h2{color: white; font-size: 5em; font-family: 'cmlight'; position: relative; padding-top: 10%; }
#header-image .col {position: absolute; z-index: 1; top: 0; left: 0; width: 100%; }
The use of Media Queries based on the screen size allows you to have different CSS depending on the resolution of the screen. The smaller you scroll the screen, it will then change it's CSS accordingly.
Media Query Tutorial : http://www.w3schools.com/css/css_rwd_mediaqueries.asp
The code below will change the font-size and the padding as the screen goes below the pixel requirements (500px and 200px). The padding was dropped to keep it under the image, and the font size was also lowered.
Solution 1
JS Fiddle : https://jsfiddle.net/Lq2zj48j/7/
#header-image {
width: 100%;
height: auto;
margin-top: 50px;
position: relative;
min-height: 200px;
}
#header-image h2 {
color: white;
font-size: 5em;
font-family: 'cmlight';
position: relative;
padding-top: 10%;
}
#header-image .col {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
}
#media only screen and (max-width: 500px) {
#header-image h2 {
font-size: 4em;
padding-top: 5%;
}
}
#media only screen and (max-width: 200px) {
#header-image h2 {
font-size: 2em;
padding-top: 1%;
}
}
Solution 2
This solution has the chance of "squashing" the image. To avoid that, you could set the image in CSS (part of the background-image on your #header-image). From there you could set it to not repeat, centered and then use media queries to preserve the aspect ratio and "Zoom" in on the image on resize.
background-image: url('https://upload.wikimedia.org/wikipedia/commons/b/b5/Mt_Elbrus_Caucasus.jpg');
background-size: 1200px 652px; /* The dimentions of your image */
background-position: center;
background-repeat: no-repeat;
Js Fiddle : https://jsfiddle.net/Lq2zj48j/8/
#header-image {
width: 100%;
height: 400px;
margin-top: 50px;
position: relative;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/b/b5/Mt_Elbrus_Caucasus.jpg');
background-size: 1200px 652px; /* The dimentions of your image */
background-position: center;
background-repeat: no-repeat;
}
#header-image h2 {
color: white;
font-size: 5em;
font-family: 'cmlight';
position: relative;
padding-top: 10%;
}
#header-image .col {
position: relative;;
width: 100%;
}
#media only screen and (max-width: 700px) {
#header-image h2 {
font-size: 4em;
padding-top: 5%;
}
#header-image {
height: 300px;
}
}
#media only screen and (max-width: 500px) {
#header-image h2 {
font-size: 4em;
padding-top: 5%;
}
#header-image {
height: 200px;
}
}
#media only screen and (max-width: 200px) {
#header-image h2 {
font-size: 2em;
padding-top: 1%;
}
#header-image {
height: 175px;
}
}
I am trying to have my website 'responsive'. I have 2 columns and am trying to have them stack on each other when below 992px. This is the code I have for the columns and the code for the media query. Whenever I go below the 992px, col1 stays at 69% and col2 at 29% but both are floating left and stacked on top of each other. I am just wondering what I am doing wrong because I want them to take up the width of the screen when below 992px. Is the code for col1 and col2 overriding the #media? I have tried the #media with display: inline and display: block but neither worked. Sorry if it is messy, I only started learning last friday :)
#media (min-width: 768px) and (max-width: 991px) {
.col1 {
width: 98%;
}
.col2 {
width: 98%;
}
}
.col1 {
margin: auto;
float: left;
width: 69%;
background-color: #686472;
color: white;
padding: 5px;
font-family: geneva;
font-size: 14px;
}
.col2 {
margin: auto;
float: left;
width: 29%;
background-color: #454349;
color: white;
padding: 5px;
font-family: geneva;
font-size: 14px;
padding-bottom: 39px;
}
.col1 {
margin: auto;
float: left;
width: 69%;
background-color: #686472;
color: white;
padding: 5px;
font-family: geneva;
font-size: 14px;
}
.col2 {
margin: auto;
float: left;
width: 29%;
background-color: #454349;
color: white;
padding: 5px;
font-family: geneva;
font-size: 14px;
padding-bottom: 39px;
}
#media (min-width: 768px) and (max-width: 991px) {
.col1 {
width: 98%;
}
.col2 {
width: 98%;
}
}
Ideally though, you would create two more media queries, one with a max-width: 768px, and one with a min-width: 991px. This way you would account for the space above and below, and put all your numbers there so there are no conflicts.
Essentially what's happening is that anything that is outside of the media query applies to all widths. A simple, unorthodox solution to this problem would be to add '!important' to the rules inside media queries, without the need to change order.
#media (min-width: 768px) and (max-width: 991px) {
.col1 {
width: 98% !important;
}
.col2 {
width: 98% !important;
}
}
However, the use of '!important' can become highly problematic in large stylesheets where conflicts may occur and hair begins to get pulled off, use it wisely.
Check out this fiddle in IE9 and try resizing the browser. As you can see the error message doesn't work properly. It works fine in Webkit, Firefox and Opera so far.
This is my current code:
#media screen and (max-width: 480px) {
#my-form label {
text-align: left;
display: block;
padding-bottom: .3em;
}
#my-form .error {
position: inherit;
display: inline-block;
left: 0;
top: 100%;
margin-top: 4px;
width: 200px;
}
#my-form .error:after {
content: "";
position: absolute;
top: 0;
margin-top: -16px;
left: 50%;
margin-left: -8px;
border-style: solid;
border-width: 8px 8px 8px 8px;
border-color: transparent transparent #313b53 transparent;
}
}
What could be the problem? I can't seem to figure it out. IE9 is the only one that doesn't work as expected...
I fixed it. It seems like there were two things causing problems with IE. First I moved the default code for errors to another another media query for 481 and more:
#media screen and (min-width: 481px) {
#my-form .error {
position: absolute;
width: 150px;
right: -171px;
margin-right: -20px;
top: 50%;
}
}
And then I used floats instead of inline-block. Seems like IE still has problems with inline-block:
#media screen and (max-width: 480px) {
#my-form label {
text-align: left;
display: block;
padding-bottom: .3em;
}
#my-form .error {
float: left; // Here
clear: left;
top: 100%;
margin-top: 4px;
width: 200px;
}
}
Demo: http://jsfiddle.net/elclanrs/BMz9U
i have fixed this issue by adding a js file respond.src.js in the header