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.
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 this full calendar (v3.4.0) plugin. I have downloaded the CSS for it from here. I have almost fully customised it. However, I have spent an hour trying to figure out how to change the border-color for all the events. I have found out this eventBorderColor form full calendar docs but I am not sure how I can use it.
I have tried the following but none of them worked:
fc-time-grid-event fc-v-event fc-event fc-start fc-end {
border-color: red;
}
and this:
.fc-event {
border: 5px solid red;
}
I have tried this one from this question:
.fc-event-inner {
border: 5px solid red;
}
Screen shot of the events:
Screen shot of the Developer's Tool: There are some styles that are given using inline styles and they don't exist in the file. These inline styles seem to have higher priority when I try to take out the border-color the actual border is applied.
Any help would be much appreciated.
Thank you
try:
border: 5px solid red !important;
I have fixed the problem by using borderColor: 'red' in JavaScript for each event when I am displaying it on the calendar.
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.
There is some weird white space showing up on the right side of my website in mobile. I was wondering if there is a CSS trick to add a border to all the html elements within the body of a webpage so that I can figure out which element is extending out and causing the white space on mobile.
Thank you
You can try this CSS snippet:
* { border: 1px solid black; }
Every element should now get a border. Beware, this means everything. Hopefuly it'll help you figure out that white space in your app!
Include that CSS snippet before your CSS files so that it can be overwritten - or after, to force it onto every element.
Try with
* {
outline: 1px solid red;
outline-offset: -1px;
}
* is a global selector, while outline will not mess with your elements positions, it'll just add a 1px red outline
Also make sure you use a CSS reset (usually body has by default 8px margin http://www.w3.org/TR/CSS21/sample.html)
You can resize your window, open the debug console and inspect the elements that might create the issue. Take a look at the Style panel and test-edit the styles until you get it fixed. in Chrome's Console you also have the Emulate option to test your page for different devices.
* {
border-style: 2px 3px solid dashed #3A5FCD;
}
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