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%;
}
}
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>
I add a TOC to my HTML document and use the following CSS to style it. But I can't close the blue gap in the picture below? I don't find the right property.
image description
<style type="text/css">
.main-container {
max-width: 100%;
}
#TOC {
margin: 20px 0px 1px 0px;
}
#media (max-width: 1800px) {
#TOC {
width: 200px;
margin-left: -20px;
}
}
.toc-content {
padding-left: 1px;
padding-right: 1px;
}
div.main-container {
max-width: 100%;
}
div.tocify {
width: 50%;
max-width: 100px;
max-height: 85%;
}
#media (max-width: 1800px) {
div.tocify {
width: 100%;
max-width: none;
}
}
</style>
Is there something wrong with my styles or media query? When im in my phone i lose the ability to scroll down. here is my only media query
#media (max-width: 568px) {
header {
padding: 1em 0;
position: fixed;
.logo {
width: 200px;
}
.main-nav {
display: none;
}
#burger-icon {
width: 27px;
display: block;
}
}
#section1 {
height: 500px;
text-align: center;
}
#section2 {
.col-1 {
width: 100%;
text-align: center;
}
.col-2 {
width: 100%;
padding: 0;
margin-left: 0;
margin-top: 20px;
display: block;
}
}
}
Try this
#media screen and (max-width: 568px) {
header {
padding: 1em 0;
position: fixed;
.logo {
width: 200px;
}
.main-nav {
display: none;
}
#burger-icon {
width: 27px;
display: block;
}
}
#section1 {
height: 500px;
text-align: center;
}
#section2 {
.col-1 {
width: 100%;
text-align: center;
}
.col-2 {
width: 100%;
padding: 0;
margin-left: 0;
margin-top: 20px;
display: block;
}
}
I fixed it, it was the skrollr declaration on my script it was my own mistake thankyou for all the help i think the skrollr.js has issue with mobile.
This is my first responsive site. I am happy with it however there is one very annoying aspect that has completely stumped me. The original site is www.elitemarquees.com.au I have changed the home page to:
http://elitemarquees.com.au/test/index.html
The issue is; when I make the browser smaller everything moves and behaves as I intended it except for the menu (#headNav) at one point. It jumps down into the main content (#content) and sits below the second line of body text. Then when you go smaller it rectifies its self and jumps back in between the logo (#headLogo) and the main body text. Here is how I have initially set up the div sections:
//this section contains two divs headLogo and headNav
#header {
height: 180px;
}
#headLogo {
width: 250px;
float: left;
}
#headNav {
width: 600px;
float: right;
margin-top: 70px;
padding-right: 40px
}
#content {
width: 500px;
float: right;
padding-right: 140px
}
The I do this which is where I believe the bad behaviour occurs:
/* for 700px or less */
#media screen and (max-width: 700px) {
#headNav {
width: auto;
float: none;
}
#headLogo {
width: auto;
float: none;
}
#content {
width: auto;
float: none;
}
#sidebar {
width: auto;
float: none;
}
}
It rectifies its self when this is fired:
/* for 480px or less */
#media screen and (max-width: 480px) {
#header {
height: auto;
}
#headNav {
padding-right: 0px;
margin-top: 0px;
}
h1 {
font-size: 24px;
}
#content {
padding-right: 10px
}
}
Thank you for any help
Here
/* for 700px or less */
#media screen and (max-width: 700px) {
#headNav {
width: auto;
float: none;
}
#headLogo {
width: auto;
float: none;
}
#content {
width: auto;
float: none;
}
#sidebar {
width: auto;
float: none;
}
}
You should add this :
#header{
height: auto;
}
I'm unfamiliar with #media queries, and what I'm trying to accomplish is a responsive removal/alteration of certain CSS when the browser viewing is shrunk below a certain resolution, or a mobile device viewing the page is also below that same specified resolution.
I need .side to remove float: left; position: fixed; width: 150px; when below 500px width resolution, and .main to remove border-left: 1px solid #000; margin: 0 0 0 170px;
.side {
display: block;
float: left;
overflow: hidden;
position: fixed;
width: 150px;
}
.main {
border-left: 1px solid #000;
margin: 0 0 0 170px;
}
Any help or explanation is appreciated.
In this way you can do this
#media only screen and (max-width: 500px) {
.side {
float: none;
position: static;
width: auto;
}
.main {
border-left:0;
margin: 0;
}
}
.side {
display: block;
float: left;
overflow: hidden;
position: fixed;
width: 150px;
}
.main {
border-left: 1px solid #000;
margin: 0 0 0 170px;
width: auto;
}
#media only screen and (max-device-width : 500px) {
.side {
float: none;
position: static;
width: auto;
}
.main {
border: 0;
margin: 0;
}
}
There is a pretty simple way to do it, just use all: unset, like this
#media ("your condition") {
.yourClass {
all:unset
}
}