New to CSS. Cannot seem to get these paragraphs aligned properly! This is for a responsive page at lg, md, sm screen sizes. The blue boxes are off by just a few pixels and move around when the screen size changes. Why aren't they aligning perfectly within the green boxes? Both blue and green boxes are ps.
CodePen:
http://codepen.io/pleiovn/pen/RaBqgY
#p-text {
background-color: #a1ab5f;
padding: 10px;
text-align: left;
clear: both;
width: 90%;
height: 300px;
margin: 10px;
}
#p-head {
background-color: #5fa1ab;
padding: 10px;
text-align: right;
position: absolute;
top: 0px;
right: 0px;
width: 33%;
height: 50px;
margin: 10px;
}
It's because you wrote your media queries wrong
this one
#media (min-width: 991px) and (max-width: 768px)
should be
#media (max-width: 991px) and (min-width: 768px)
Related
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.
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 am having a hard time making the results boxes on this page responsive:
http://search.epicmountainhomes.com/i/deer-valley-real-estate
Does anyone know how to edit it using IDX broker or custom CSS?
Thank you very much!
Ok I figured it out:
/*Set Mobile Responsiveness One*/
#media only screen and (max-width: 500px) {
.IDX-resultsCell {
padding-bottom: 22px !important;
border-bottom: 1px solid #e5eeed !important;
clear: left!important;
width: 100%!important;
}
}
/*Set Mobile Responsiveness Two*/
#media only screen and (max-width: 500px) {
.IDX-grid .IDX-resultsPhotoImg {
height: 155%!important;
width: 100%!important;
clear: left!important;
left: 0!important;
position: absolute!important;
top: auto!important;
z-index: 0!important;
max-height: none;
max-width: none;
min-height: none;
min-width: none;
}
}
I have a jsfiddle here https://jsfiddle.net/ajvvjnq3/
Really simple, I have a div with fixed width, position fixed and centered.
Below 600px I want the div to be 100% width with 20px margin left and right.
I can't get margin-right: 20px;
.block{
background: red;
height: 100px;
position: fixed;
top: 50px;
left: 50%;
margin-left: -200px;
width: 400px;
}
#media only screen and (max-width: 600px){
.block{
left: 0;
margin-left: 20px;
margin-right: -20px;
width: 100%;
}
}
<div class="block"></div>
JSfiddle https://jsfiddle.net/ajvvjnq3/2/
You could try using calc
width: calc(100% - 40px); seems to work fine
All its doing here is just negating the values from your margins.
Edit
Alternative would be to use #CBroe answer as it supports more browsers than calc, but whatever floats your boat:)
#media only screen and (max-width: 600px){
.block{
left: 20px;
right: 20px;
width: auto;
margin: auto;
}
}
I’d simply used this:
#media only screen and (max-width: 600px){
.block{
left: 20px;
right: 20px;
width: auto;
margin: auto;
}
}
Positioning the element 20px from left and right, and setting width to auto will make it get the right width while respecting the “gap” you want it to have on either side. And margin: auto (0 would work as well) simply undoes the margin you used earlier to center the element.
https://jsfiddle.net/ajvvjnq3/4/
Try this, it will work..
#media only screen and (max-width: 600px){
.block{
left: 0 !important;
margin: 0 !important;
position: relative !important;
right: 0 !important;
width: 100% !important;
}
}
Try this replace width:100%; with width:initial; add right:0;
#media only screen and (max-width: 600px){
.block{
position: fixed;
top: 50px;
left: 0;
margin-left: 20px;
margin-right: 20px;
right:0;
width:initial;
}
}
Demo Here
calc() makes it easy to position an object with a set margin. In this example, the CSS creates a banner that stretches across the window, with a 20-pixel gap between both sides of the banner and the edges of the window
JSFIDDLE
http://jsfiddle.net/DhwaniSanghvi/okvoLuu5/
<div class="block"></div>
.block{
background: red;
height: 100px;
position: fixed;
top: 50px;
left: 50%;
margin-left: -200px;
width: 400px;
}
#media only screen and (max-width: 600px){
.block{
position: fixed;
top: 50px;
margin-left: 20px;
margin-right:20px;
left:0;
width: calc(100% - 40px);
}
}
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.