Was hoping to increase the height of the google map module in Divi but my CSS code is not working and do not understand why. I am pasting the following code within Advanced > Custom CSS > Main Element of the Map Module
.et_pb_map {
height: 440px;
}
Any suggestions would be very useful!
Absolute Map for Divi Theme
Add the following CSS in the Row Settings/ Custom CSS/ Column "1" Main Element (column number is where you will put the map):
position:relative;
Add a Class to Map Module. In this example the CSS Class is absolute_map
Add the following CSS in the Custom CSS box:
.absolute_map .et_pb_map {
position: absolute;
overflow:visible;
height: 100%;
}
Be happy!
Try to add padding instead of an explicit increase of height.
#map ,#map .et_pb_map {padding-bottom: 56.25%}
You might have to adjust the selector. Usually #map is enough though.
and adjust the padding percentage to modify the aspect ratio. This is responsive.
The reason why this might work is because padding creates more space for the background - map in the case of this iframe - to be painted thus expanding it.
Read more on this here
Working demo on JSFiddle
If you're customizing through that section (Advanced > Custom CSS > Main Element) of the Divi Builder, just add the property declaration not the entire CSS rule.
height: 440px;
no need to add css class in the advanced > custom css. just add the property value 440px.
use !important for overnight css
.et_pb_map {
height: 440px !important;
}
Just add !important to your css
.et_pb_map {
height: 440px !important;
}
Use below code.
Please use your google API key here in this js file.
If you wanted to increased/decreased height of map then do changes in #div_gmap.
#div_gmap {
height: 440px;
}
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
<div id="div_gmap"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('div_gmap'), {
center: {lat: 22.3039, lng: 70.8022},
zoom: 12
});
}
</script>
If this thing is not working well then might need to check some of the css or any other framework causing this issue.
The best way to test out why the css dimension code doesnt work is to use chrome dev tool.
Press Shift+ Ctrl + I (or cmd + alt + I if you are safari user) and open up the web dev tool bar. Go to the Elements section and you will see styles controller. In the styles controller, you click on the elements you wanna check on the DOM side, in your case, it's probably <div class="et_pb_map">...</div>, or you can press ctrl+f to search et_pb_map.
After you have done that, you can go to the box viewer in the style tab and see why it doesnt work out.
I would say sometimes if you use padding/margin and didnt set overflow property well, it will crop out your elements. Or maybe your class is being overlapped by other class. You can use embed style to override that <div class="et_pb_map" style="...">...</div>, or simply put your class as the last class in the class attributes.
Example on using chrome web dev tool bar
Go to Appearance -> Customize -> Additional CSS and paste this code
.et_pb_map iframe {height: 400px !important; }
This will help you Check this jsfiddle
This is the only solution that worked for me. Assign a class to your map module i.e. .map-height and target it like this:
.map-height .et_pb_map {
overflow:visible;
height: 500px!important;
}
The simple approach is:
Go to Divi Theme Options
Scroll down to Custom CSS
Enter .et_pb_map {height:500px;}
Click Save Changes (the map will now change to 500px height)
I am developing a website on wordpress using the theme "Virtue". I have added custom css to change the appearance/behaviour of some elements.
Here is a link to the site: http://deepdive.ma/test5182/
When I open the site, the custom css is not accounted for.
To take a specific example: the menu should be in a light blue color (#e7ecf1), but it is white.
When I use DOM inspector:
The content of my custom css is included in head, including css for the class .headerclass;
But the styling element 'header class="banner headerclass" role="banner"' does not refer to it. It only refers to elements.style, then to external style sheets (default.css; virtue.css; ...).
It's probably something stupid but I really can't find the problem. Anyone can help with this?
You're not properly closing .home .page .wide. You need the closing } in Line 32.
.home .page .wide{
width: 80%;
max-width: 700px;
left:auto;
right:auto;
}
A suggestion: why not customize the theme's CSS instead of dropping the new CSS inline in the HTML document. It'll avoid major headaches.
I have a Bootstrap wysihtml5 on an input form.
I haven't been able to make the input width = 800px
The pics show the browser. If I uncheck the width: 201px; then I get what I want.
If I change the source code that is setting the 201px, then other forms get messed up.
I tried adding this:
.wysihtml5-sandbox {
width: 800px;
}
That may be caused by the order in which styles are loaded. If I'm not mistaken, the latest style read is displayed. You can override it with using !important :
width: 800px!important;
I use valaddthis on joomla 1.5.25 but i have a problem with its css. I spotted with firebug that the problem is margin-top which should be altered to 215px for my webpage. Its css derives from widget76.css which is imported for the iframe utility from http://s7.addthis.com/static/r07/widget76.css address. How can i add this change?
#at16p
{
margin-top: 215px !important;
}
This is all i need.
I think you can solve this problem with overriding css of addthis.com.
You have to create one division(or existing) before addthis widget, give some id(myid) to that division and this was you can override css property.
#myid at16p {
margin-top: 0;
}
I think this was you can change default css of addthis widget. Try it and let me know.
I've been stuck on this for 3 days now.
I have two pages that basically share some code for a search feature on my website, here's my code
The CSS
#btnSearch {
display: block;
color: #ffffff;
width: 100px;
height: 27px;
border: 0;
padding: 0;
background: transparent url("Images/btnSearch2.png");
}
When I'd gotten the one page working, I copied that code to the page where it doesn't work, but it hasn't made any difference, here's the HTML (don't worry about the inline css, that's just for convenience while I'm working on it...)
EDIT1:
All other classes work correctly as they (along with the css above) come from a stylesheet at <webroot>/App_Themes/Default... The images go in a subdirectory of this location.
I don't see why this code works on 1 page and not the other when all the other CSS classes work on both pages...
Have you tried the absolute image path and see if it works that way?
Maybe it´s a Browser problem: Try to open the file that doesn´t work in another browser.
Maybe you have a tag named the same way #btnSearch in the pages where the styles don´t apply.
Is the path to the background image correct for the page where the code doesn't work? Or even the path to the CSS file?