That's my basic style
#logo {
position: absolute;
background: url('imgs/logo.png');
width: 739px;
height: 195px;
margin: -291px 0 0 133px;
z-index: 5;
pointer-events: none;
}
And I want to change the margin-left to something else based on the media. For example width 100px but it doesn't work.
#media (min-width: 1440px) {
.bc {
padding: 0;
margin: 0 auto;
width: 1150px;
}
.content_table {
width: 1150px;
}
#logo {
position: absolute;
background: url('imgs/logo.png');
width: 739px;
height: 195px;
margin: -291px 0 0 233px;
z-index: 5;
pointer-events: none;
}
}
Out of your comment the first rule (the one with the margin 133px) is after the rule in the #media block.
As both have the same selector for the rule only the order in the css file matters.
Thats why the last rule (the one with the 133px) always overwrites the one in the #media block.
You should place all rules that are not in a #media block at the beginning of your css file and add the #media blocks after those rules.
#media screen and (min-width: 1440px) {
#logo {
}
}
min-width: 1440px is a lot. are you sure you are not trying to check max-width?
Related
At line 449 of this page, there is:
#media (min-width: 981px) {
#tdr-gallery-our-work .wpb_image_grid .wpb_image_grid_ul .isotope-item {
max-width: 9.09090909% !important;
position: relative !important;
left: auto !important;
top: auto !important;
}
}
However, if I inspect the LI element of the image gallery in the middle of the page, code inspector says that only the following rule is being applied:
.wpb_image_grid .wpb_image_grid_ul .isotope-item {
list-style: none;
margin: 0 1px 1px 0;
max-width: 8.92857142%;
height: auto;
float: left;
position: relative !important;
left: auto !important;
top: auto !important;
}
The div#tdr-gallery-our-work definitely contains this image gallery, but it's not even being detected by the code inspector. It's in the source code, so why isn't it being applied?
I am in a browser on a 1680px monitor, and the media query takes place at (min-width: 981px).
Help appreciated.
If I have a CSS class that I want to inherit all the properties, except for one property set during a media query, what is the best way to do it?
.my-original-class {
margin: 70px 0 40px 0;
background-color: #color-gray-light;
#media (min-width: #screen__m) {
margin: 90px 0 40px 0;
}
#media (min-width: #screen__l) {
margin: 90px 0;
}
article {
position: relative;
padding: 35px 0px;
#media (min-width: #screen__s) {
padding: 50px 30px;
}
}
.my-slightly-different-class {
border-radius: 50px;
.my-original-class
}
This is essentially what I have now, but I would like to exclude the margin setting at the #screen_m media query.
Doing
.my-slightly-different-class {
border-radius: 50px;
.my-original-class
}
#media (min-width: #screen__m) {
.my-slightly-different-class{
margin: 90px 0 0 0;
}
}
works, but the outputted code doesn't seem like the cleanest way to do it, since it just repeats the #media query over again and overrides the previous selection.
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;}
This question already has answers here:
Responsively change div size keeping aspect ratio [duplicate]
(5 answers)
Closed 7 years ago.
I want to set child item height in various screen size as dynamically using sass function instead of writing manually. I know we can use css position: absolute; property or simply use jQuery code to get the result, but I want to achieve child item value using with sass function.
**We can give width as percentage value, but height can't result without giving position: absolute; when giving percentage value.
Check my pen : http://codepen.io/nikhil8krishnan/pen/adqbeR?editors=1000
Check below codes , Here I'm writing item value manually on each screen size.
Outputs
.container {
background-color: red;
margin: auto;
text-align: center;
color: #fff;
font-size: 0;
}
.child {
display: inline-block;
border-right: solid 1px #fff;
background-color: green;
}
/* container width and child width & height is set by manually on each screen size*/
/*max to 767px*/
.container {
width: 100%;
}
.child {
width: 25%;
height: 25%;
}
#media (min-width: 768px) {
.container {
width: 600px;
}
.child {
height: 150px;
width: 150px;
}
}
#media (min-width: 980px) {
.container {
width: 800px;
}
.child {
height: 200px;
width: 200px;
}
}
#media (min-width: 1200px) {
.container {
width: 1000px;
}
.child {
height: 250px;
width: 250px;
}
}
How can I write those codes with sass functions? Is it possible please share thoughts.
To automate the export of media queries you could use the following function
$viewports: ( 100%, 600px, 800px, 1000px);
#each $viewport in $viewports {
#media (min-width: #{$viewport}) {
.container {
width: $viewport;
}
.child {
height: $viewport/4;
width: $viewport/4;
}
}
}
An example: http://www.sassmeister.com/gist/e87c4121d584776355cd
I'm working on a responsive picture gallery and I'm looking to modify some code I found. I've made a jsFiddle to show you what I'm working with.
jsFiddle
I want to be able to have a couple buttons below each image in the gallery. As you notice, if there is an image underneath an image the image above has its text cut off. I've thought about adding a margin bottom to .box as such:
.box {
float: left;
position: relative;
width: 14.28%;
padding-bottom: 14.28%;
margin-bottom: 30px;
}
jsFiddle with margin-bottom
I'm wondering if there is a better way to approach this. It seems if you re-size the window too small the text overlaps the images.
You just need to make the bottom padding on .box-container 30px:
.box_container {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 10px 10px 30px 10px;
margin-bottom: -35px;
margin-left: 5px;
margin-right: 5px;
}
http://jsfiddle.net/jFwYU/3/
body {
margin: 0;
padding: 0;
background: #EEE;
font: 10px/13px'Lucida Sans', sans-serif;
}
.box {
float: left;
position: relative;
width: 14.28%;
padding-bottom: 10px;
}
.boxInner img {
width: 100%;
}
body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
margin-bottom: 0;
}
#media only screen and (max-width : 480px) {
/* Smartphone view: 1 tile */
.box {
width: 100%;
padding-bottom: 10px;
}
}
#media only screen and (max-width : 650px) and (min-width : 481px) {
/* Tablet view: 2 tiles */
.box {
width: 50%;
padding-bottom: 10px;
}
}
#media only screen and (max-width : 1050px) and (min-width : 651px) {
/* Small desktop / ipad view: 3 tiles */
.box {
width: 33.3%;
padding-bottom: 10px;
}
}
#media only screen and (max-width : 1290px) and (min-width : 1051px) {
/* Medium desktop: 4 tiles */
.box {
width: 25%;
padding-bottom: 10px;
}
}
#media only screen and (max-width : 1590px) and (min-width : 1291px) {
/* Large desktop: 5 tiles */
.box {
width: 20%;
padding-bottom: 10px;
}
}
#media only screen and (max-width : 1920px) and (min-width : 1591px) {
/* Extra large desktop: 6 tiles */
.box {
width: 16.6%;
padding-bottom: 10px;
}
}
1) Removed position:absolute; for boxInner and box_container
2) Avoid using floats and position:absolute; together
3) Only horizontal dimensions should be defined in percentage, not the vertical ones(padding-bottom:33% is not good)
It seems that perhaps the simplest solution for this problem would be to modify the css for the box:
.box {
float: left;
position: relative;
width: 14.28%;
height: 14.28%;
margin-bottom: 40px;
}
height is a much more semantic way than padding-bottom to get what you are looking for, and to make sure the text displays properly (which probably shouldn't be absolutely positioned, but minor issue), add a margin-bottom.
You could also have the margin-bottom as a percent to have it be a percent of the size of the box, say, 20% or so, but px might be a good idea if you're not worried about teeny tiny boxes being an issue (whole gallery less than 50px)
Hope that helps!
I created something to help a college student get started. I adapted your images to the attached code. There are some features that the student needed that you did not ask for, but you can easily remove them.
I believe it meets the intent of preserving the space between images and allows text for each picture. The text is locked to its picture.
The code is not optimized and can certainly be improved, but it will hopefully put you a little closer to what you wanted,
Updated: Example Photo Gallery
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Photo Viewer</title>
<style>
html {
border: 0 none transparent;
}
body {
padding: 0;
margin: 0;
font-family: arial, tahoma, sans-serif;
font-weight: 400;
font-size: 15px;
background: #FEFADA;
color: #2C2218;
width: 100%;
height: 100%;
border: none;
text-align: center;
font-style: normal;
font-weight: normal;
font-variant: normal;
cursor: pointer;
}
.picture {
/*Add venfor specific property*/
-webkit-column-count: 4;
/*Set the default to 4 columns*/
column-count: 4;
/*Set text line height*/
line-height: 1.5;
/*Add venfor specific property*/
-webkit-column-gap: 15px;
column-gap: 15px;
/*Outer margin for picture container*/
margin: auto 10px;
}
/*Switch to three columns at this display width*/
#media (max-width: 1024px) {
.picture {
/*Add venfor specific property*/
-webkit-column-count: 3;
column-count: 3;
}
}
/*Switch to two columns at this display width*/
#media (max-width: 764px) {
.picture {
/*Add venfor specific property*/
-webkit-column-count: 2;
column-count: 2;
}
}
/*Switch to one columns at this display width*/
#media (max-width: 480px) {
.picture {
/*Add venfor specific property*/
-webkit-column-count: 1;
column-count: 1;
}
}
.hide {
display: none;
}
.img, .selected-img {
width: 100%;
margin: 8px auto;
white-space: nowrap;
}
.selected-img {
max-width: 1024px;
}
.selected {
position: fixed;
margin: 5px auto;
left: 0;
right: 0;
z-index: 10;
display: block;
}
.closeme {
-webkit-align-content: center;
left: 0;
right: 0;
width: auto;
margin: auto;
display: block;
}
.disable {
background: rgba(0, 0, 0, .3);
width: 100% !important;
height: 100% !important;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 5;
position: fixed;
}
.btn {
border: 1px;
border-color: transparent #D1C89D transparent #D1C89D;
background: #EBE6C1;
height: 40px;
margin: auto 0;
width: 100%;
}
.picture-text {
margin: auto;
padding: 10px 3px;
display: table-cell;
white-space: normal;
}
.inline-block {
display: inline-block;
white-space: nowrap;
}
</style>
</head>
<body>
<div>
<!-- Hide the selected image window until its needed with the hide class -->
<div id="selectedWindow" class="hide">
<button class="closeme btn" onclick="closeWindow()">Click this Button or on the Selected Image to close window.</button>
<!-- Load the selected image here -->
<img id="selectedImage" class="selected-img" onclick="closeWindow()" />
</div>
<button class="btn" onclick="loadImages()">Load Images</button>
<div id="imageContainer" class="picture" onclick="loadSelectedPicture(event)"></div>
<div id="disableMask"></div>
</div>
<script type="application/javascript">
function loadImages() {
// For DEBUG if you need it: alert("Made it to the function");
var element = document.getElementById("imageContainer");
var imageArray = ["http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/1.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/2.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/3.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/4.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/5.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/6.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/8.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/9.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/10.jpg", "http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/11.jpg"];
var picture = "";
for (var i = 0; i < imageArray.length; i++) {
// Create an id for each image and add its class.
picture += "<div><img id=\"i" + i + "\" class=\"img\" src=\"" + imageArray[i] + "\"><div class=\"inline-block\"><div class=\"picture-text\">Here is some text for each image. How long can this text be before we have some issues.</div></div></div>";
// For DEBUG if you need it: console.log(picture);
}
element.innerHTML = picture;
}
function loadSelectedPicture(event) {
var target = event.target || event.srcElement;
this.stopEventPropagation(event);
var selectedElement = document.getElementById(target.id);
var imageElement = document.getElementById("selectedImage");
if (!selectedElement.src)
return;
imageElement.src = selectedElement.src;
document.getElementById("selectedWindow").className = "selected";
document.getElementById("disableMask").className = "disable";
}
function stopEventPropagation(event) {
if (!event)
event = window.event;
//IE9 & Other Browsers
if (event.stopPropagation) {
event.stopPropagation();
}
//IE8 and Lower
else {
event.cancelBubble = true;
}
}
function closeWindow() {
document.getElementById("selectedWindow").className = "hide";
document.getElementById("disableMask").className = "";
}
</script>
</body>
</html>
I will try to update this post with a working jsFiddle when I have some free time.