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.
Related
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;}
I have a responsive site that works perfectly fine on all desktop browsers as well as mobile Chrome, resizing the way I want no matter how narrow the window gets, but I'm getting a horizontal scroll on mobile Firefox. My content is just slightly too big, although I can't imagine how with my CSS. Here's what I believe is relevant:
#main {
width: 90%;
max-width: 960px;
margin: 0 auto;
}
.infoSection {
display: inline-block;
height: 300px;
margin-bottom: 75px;
}
.infoSection img {
position: relative;
float: right;
max-width: 50%;
top: 50%;
transform: translateY(-50%);
}
#media (min-width: 0) and (max-width: 470px) {
.infoSection {
height: auto;
margin: 0 0 30px;
}
.infoSection img {
display: block;
float: none;
max-width: 80%;
margin: 20px auto 0;
transform: none;
}
}
Existing questions about horizontal scrolling on mobile all seem to involve setting overflow-x to hidden, which doesn't help because I want my content to resize properly. :/
I currently am using a fixed header for my website: http://www.destinykingproductions.com/test/ I have attached the css I currently have. Anyone have any suggestions on why this is happening?
#main {
background-color: transparent;
margin-top: -40px;
height: auto;
max-height: none;
width: auto;
padding-bottom: 35px;
}
header#masthead {
height: 103px;
background-image: url(http://www.destinykingproductions.com/test/wp-content/uploads/2014/08/header_bg1.jpg);
position: fixed;
z-index: 856;
width: 100%;
margin-top: 0px;
top: 0px;
}
nav.main-navigation {
top: -200%;
background-color: transparent;
z-index: 4670;
}
nav.main-navigation ul.menu li {
padding-left: 17px;
}
nav.main-navigation ul.menu {
margin-left: 18%;
}
#shiftnav-toggle-main {
display: none;
}
Thank you for your assistance!
The comments above are correct - the "sticky" class nav is being added / toggled at some point. When you add 'display:none' to that sticky class, then it is fine on a desktop view. However, it looks like you are using that class for something with mobile because when the screen is resized smaller and back to normal then the side menu area doesn't go away. It looks like you may want to move that sticky class to your 768px media query and/or have it not show on larger screens.
/*normal css*/
.main-navigation.sticky { display: none }
#media screen and (max-width: 768px)
{
.main-navigation.sticky { display: block }
}
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?
How can I resize only the first image present inside a post with CSS without affecting any other image inside the post. If I use the following code:
#content div.single:nth-of-type(n) img {
width: 448px !important;
height: 252px !important;
padding: 0 !important;
margin-top: 0;
It resizes all the images present inside the post.
I have also tried nth-child with no success:
#content div.single img:nth-child(1){
width: 448px !important;
height: 252px !important;
padding: 0 !important;
margin-top: 0;}
Here is the Demo
Why not target the image you want like this:
.alignnone.size-full.wp-image-35095 {
width: 448px !important;
height: 252px !important;
padding: 0 !important;
margin-top: 0;
}
when you have a class with spaces you target the class in css but you change every space with a dot.
If you want always to target the first image in a post then you can run Jquery:
$( "#content img" ).first().attr('width', '150');
Btw you have an important in your first image and I was struggling why this is not working :P
You could try this:
#content div.single img:first-child {
width: 448px !important;
height: 252px !important;
padding: 0 !important;
margin-top: 0;
}
Solved it easily with CSS like this:
.single p:nth-child(2) > img {
width: 448px !important;
height: 252px !important;
padding: 0 !important;
margin-top: 0;
}