I am trying to add shadows using the following code
-moz-box-shadow:0 1px 3px #B8B8B8;
-webkit-box-shadow:0 1px 3px #B8B8B8;
box-shadow:0 1px 3px #B8B8B8;
I am able to create this effect on sidebars,widgets,footer,etc.
However when I try to put this around the main content area,the shadow on the bottom only comes.In the other sides,theres no shadow.
I am trying to find the reason since past 2 days.Today after some googling,i thought there might be some div with a higher z-index around,but,i believe theres no div.
Google chromes inspect element has a stike on the css and reveals an error of unknown property name.Can anyone please help me.
Here is my blog.
You have overflow:hidden on .blog-posts.hfeed and #main-wrapper remove those, or put margin: 3px on .post
Related
I have an HTML page for my code and a CSS page for all my classes/styling, but my div class is not applying to my div code.
It's weird because all of my other div classes are fine, but it's just this one.
My code is simple:
<div class="box">
</div>
And my class is also fairly simple:
.box {
border-right: 10px solid black;
border-left: 10px solid black;
border-top: 10px solid black;
border-bottom: 10px solid black;
}
It is probably a simple rookie mistake as I am new to this, but as I said, all the other classes work fine and they are the same as this.
Also, I tried putting the class in the HTML file itself, in [style], and it worked perfectly. I just wanted to know why it wasn't working when it was in another file when everything else was.
You must specify the width and height of the div. Because of that, it isn't showing the borders. Or, you can put some content inside your div, and after that, it will show the borders.
And a little advice: you don't have to type style for all border sides especially. You can just say: border: 10px solid black; and it will be applied to all sides of the box.
You need to add some content to your div, or give a height to your div. If not, you will not be able to see your div and the border styles that you added.
In addition, you can make your code more efficient since all 4 border sides are the same styles. You can just use the following styling:
.box {
border: solid 10px black
}
So, after a bit more googling, I discovered it was as simple as doing shift + f5 to do a complete cache refresh. Turns out, if you have a completely separate file for all your CSS classes, it doesn't update the cache automatically.
I have a website with a product page that need changes:
http://weardenali.com/product/everyday-messenger
I'm trying to
a) Change the background color
b) Remove the shadow box
It works on the iPad (which is 768px in height) but as soon as the website height decreases below 768px, the swipe function stops working.
I hope somebody can assist me with this .
This image of my site is here
Here are your changes:
A) change product-main clearfix style background-color: #fcfcfc; to your wish color.
B) Remove
Remove /* -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1); */
Remove /* box-shadow: 1px 1px 1px rgba(0,0,0,.1);`
from your
summary
class or rename your div.
C) i just test it in chrome version 55........ simulated iphone 5 and ypur carousel still working.
To answer your questions in order:
a) The background of your page is specified as an element style. Probably from the WordPress styling or any other cause that I cannot immediately determine. The root element is styled by .product-main in the sf-combined.min CSS file. Here you can set the background-color to anything you want, as proposed:
.product-main {
background-color: #anything;
}
Considering this may or may not work, I suggest you try to determine why the .product-main has a element style of #fcfcfc. The following is not recommended but you can always set .product-main { background-color: #anything !important; } to override any settings. But this is not best practise.
b) in your CSS in sf-combined.min.css on line 15 (which may be inaccurate because it's a minified CSS document) you have the following line:
.product-fw-split div.product div.summary.
Remove the box shadow entries from the CSS:
.product-fw-split div.product div.summary {
padding: 40px;
margin-bottom: 40px;
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,.1);
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1);
box-shadow: 1px 1px 1px rgba(0,0,0,.1);
}
And the box shadow should disappear. Please do check for any responsive queries that may affect the same thing on mobile devices (which I didn't check).
c) I could not determine entirely what your question was in c. I believe you want to know how to prevent the swipe functionality from stopping working when resizing on devices smaller than 768px? It might be WooThumbs intended functionality, in which case I suggest you head over to CodeCanyons support and try to get an answer directly from them. https://codecanyon.net/item/woothumbs-awesome-product-imagery/2867927
Hope it helps.
Next time it might be easier to split your questions off into multiple questions, so that others can find answers more easily.
In my website I have a part where I'm using an amount of li's depending on how many entries there are.
So lets say there are 3 entries, 3 li's will be generated. When there are 4 entries 4 li's will be generated and so on. What I did is give my ul a columns value which changes depending on how many entries there are.
This all works flawless. However what I want now is to draw a drop shadow on every li. When I try to do this only the last li is effected the way it should be. Does anyone know how I can change this?
my li's are of the class item. and the css I tried to apply to it is as follows
.item{width:100%; max-width: 290px; box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
-ms-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
-o-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);}
Hope someone will be able to tell me how to solve my problem
EDIT
As requested here is an example of what happens.
https://jsfiddle.net/x0u9xao0/
The problem was that the columns stop at the bottom of the element, so you couldn't see the bottom shadow (which was below that)
Adding a margin-bottom to each of the list elements meant that the column went on for some more, so you can see the bottom shadow
See fiddle
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 6 years ago.
I am working on with 2 images styles and I'm having an annoying problem here, probably because I don't know much yet. What I'm trying to do is to get a second image on the first image to be like a sticker (if you see the jsFiddle on bottom you will understand more)
Problem is that from my default CSS I have on every image I upload on my blog to have a border:2px solid #fff (on the round). But I don't want this CSS to be applied on the second image i have in front of the first.
I am doing this by over-riding the default CSS with <style> tag on the post.
.post img {border: 0px solid #fff; //default : 2px solid;
-moz-box-shadow:none ; // default ....
-webkit-box-shadow:none ; // default ....
box-shadow:none } // default ....
body { background-color:black;
}
Also on the first image I add the style again like
style="clear: left; float: left; margin-bottom: 1em; border: 2px solid #fff!important;-moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, .8); margin-right: 1em;
This way the CSS is overwritten so no border or shadow is applied on any image, but the first image has the borders and shadows applied via its style. The second image gets nothing from CSS.
Problem is when I do this, there is a small gap from the image to bottom-border
and I cant figure out why.
Here is the link click
Just give the image
display:block;
see updated fiddle
it should now looks like
I see that you used the div tag to contain and control image properties and position. Remember that by default the div tag creates a small margin around itself so divisions floating or fixed on the same page and z-index will not collide. To fix this problem and allow div wrapped objects to snuggle up to each other use negative margins, usually for the top and left positions. Just a few pixels will do.
{
margin-left:-3px;
margin-top:-3px;
}
Try this on the extra image(s) you add, not the original, unless to need to trim its position as well. The -3px was just a guess. It could be as high as -10px or more. This code will move the images, so adjust the negative margin to taste.
You should remove your 1em margins from the bottom and right side of the first div before trying negative margins to make them extra close.
I'm integrating the google map in my site. It works fine. However, it shows grid like this:
Which I want to remove it to make the map more good looking. Anyone has an idea how to remove this?
Thanks
That is a css problem (css being applied to the tiles which is modifying the appearance). You need to fix that.
These rules are being applied to the tiles:
-webkit-box-shadow: 1px 1px 10px #AAA;
box-shadow: 1px 1px 10px #AAA;
From: #body .left .content img in style.css line 224
Remove them or override them on the map.