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;
}
}
Related
Im so new in CSS and trying to fix the following code..
I want a simple thing where the screen size is smaller than 400 change the image size..
it should work but it doesn't..
I tried to make
* {
box-sizing: border-box;
}
body, html {
background: #fff;
height: 100%;
margin: 10px;
}
.left__img2 {
position: absolute;
float: left;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border-radius: 20px;
width: 600px;
height: 400px;
}
#media screen and (max-width: 500px) {
.left__img2 {
width: 10px;
}
}
Media queries at the top of the CSS need !important to over rule the media query. Media queries at the bottom do not need !important. I placed the query at the top so I used !important to over rule any other style after.
#media screen and (max-width: 500px) {
.left__img2 {
width: 10px !important;
}
}
* {
box-sizing: border-box;
}
body, html {
background: #fff;
height: 100%;
margin: 10px;
}
.left__img2 {
position: absolute;
float: left;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border-radius: 20px;
width: 600px;
height: 400px;
}
I think this will work.
#media screen and (max-width: 500px) {
.left__img2 {
max-width: 10px;
}
}
Your code works well in the following example (resize your window), maybe it comes from a side effect of the rest of your code, can you show us the rest of your code?
.left__img2 {
position: absolute;
float: left;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border-radius: 20px;
width: 600px;
height: 400px;
background-color: red;
}
#media screen and (max-width: 500px) {
.left__img2 {
width: 10px;
background-color: yellow;
}
<div class="left__img2"><div>
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 have tried to create media queries for mobile and tablet, and they do work when I'm on a normal browser (on my desktop computer and I make the screen smaller), but do not work when I'm on an actual mobile or tablet. I have done my CSS and HTML validation so I can't imagine it'd be that.
My website is up and running on my universities server so you could view my media queries from there: http://stc110.edu.csesalford.com/ or http://stc110.edu.csesalford.com/general.css
These are my media queries:
/*Styles for screen 600px and lower*/
#media handheld, screen and (max-width: 600px) {
#navigation {
height: auto;
}
#navigation ul {
width: 100%;
display: block;
height: auto;
}
#navigation li {
width: 50%;
float: left;
position: relative;
}
#navigation li a {
border-bottom: 1px solid #ff9999;
border-right: 1px solid #ff9999;
}
#navigation a {
text-align: left;
width: 100%;
text-indent: 25px;
}
header {
padding-top: 30px;
}
}
/*Styles for screen 480px and lower*/
#media handheld, screen and (max-width : 480px) {
#navigation {
border-bottom: 0;
}
#navigation ul {
display: none;
height: auto;
}
#navigation a#pull {
display: block;
background-color: #ff6666;
width: 100%;
position: relative;
}
#navigation a#pull:after {
content:"";
background: url('images/nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
/*Smartphone*/
#media handheld {
#navigation {
border-bottom: 0;
}
#navigation ul {
display: none;
height: auto;
}
#navigation a#pull {
display: block;
background-color: #ff6666;
width: 100%;
position: relative;
}
#navigation a#pull:after {
content:"";
background: url('images/nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
Please put below code inside head section
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
#media handheld is deprecated.
Instead, use:
#media only screen and (max-width: 600px) {
and
#media only screen and (max-width: 480px) {
I'd like to make my gallery http://wordpress.org/extend/plugins/photospace-responsive/ be responsive with a vertical layout changing into a horizontal one when the browser is scaled down for mobile.
Please can you tell me how I can make it revert when the screen size is smaller to the gallery being on top?
See my test page
http://brightmist.co.uk/gallery/
I've even tried media queries
.photospace_res .gal_content {
float: left;
width: 80%;
}
.photospace_res .thumbs_wrap2 {
float: left;
min-height: 800px;
width: 20%;
}
#media all and (max-device-width: 480px) {
.photospace_res .gal_content {
float: none;
width: 100%;
}
.photospace_res .thumbs_wrap2 {
float: none;
min-height: 0;
width: 100%;
}
}
Thanks for your help
Judi
Yay I fixed it and added a few extra styles
.photospace_res .gal_content {
float: left;
width: 80%;
}
.photospace_res .thumbs_wrap2 {
float: left;
width: 20%;
}
.photospace_res {
margin: 0;
}
.photospace_res .ss-controls {
border: 1px solid #CCCCCC;
margin-bottom: 20px;
padding: 5px 10px;
}
#media screen and (max-width: 700px) {
.photospace_res .gal_content {
float: none;
width: 100%;
}
.photospace_res .thumbs_wrap2 {
float: none;
min-height: 0;
width: 100%;
}
}
I'm currently trying to create a website with different media queries for different device sizes, the problem is, when I add a media query in the media-queries.css file for a different viewport the browser only reads one.
I recently added a media query for a maximum width of 1500 pixels, but now the media query for max-980px wont work.
Here's the css, anyone that can help me?
/************************************************************************************
smaller than 980
*************************************************************************************/
#media screen and (max-width: 980px) {
.slider-container {
width: 100%;
height: 100px;
background-color: white;
overflow: hidden;
-moz-border-radius: 20px;
border-radius: 20px;
}
.wrapper .slider-container #slideshow {
position: relative;
width: 100%;
height: 300px;
}
.wrapper .slider-container #slideshow > div {
position: absolute;
}
.wrapper .slider-container #slideshow > div img {
border: 20px solid #00e800;
height: 100%;
}
}
/************************************************************************************
smaller than 1500
*************************************************************************************/
#media screen and (max-width: 1500px) {
.slider-container {
width: 100%;
height: 400px;
background-color: white;
overflow: hidden;
-moz-border-radius: 20px;
border-radius: 20px;
}
.wrapper .slider-container #slideshow {
position: relative;
width: 100%;
height: 400px;
}
.wrapper .slider-container #slideshow > div {
position: absolute;
}
.wrapper .slider-container #slideshow > div img {
border: 15px solid #f3f70a;
height: 100%;
}
}
Add a min-width component to the larger max-width:
#media screen and (min-width:981px) and (max-width: 1500px) {
This should tell the system to segregate the two choices, as < 980 will also always be < 1500.