I'm trying to reduce the height of a footer in my WordPress Website.
Apparently (check the picture linked) the style is directly in the div but I failed finding it in my WP files.
Can anyone help me with this?
Capture of the html inspector
When dev tools show styles like this. Its an indicator it's being controlled by JS.
element.styles{
position: relative;
height: 122px
}
As your JS is loading after your css (as it should be), you need to override the property after JS is called. This is one of the few times you should add !important to your css. So to override the JS height you need something like this
.site-footer .widget-area{
height: 400px !important;
}
I am using angular-material 8, I need to reduce the default width (180px) of the .mat-form-field-infix, but am unable to change that css?
This is the by default-size of the .mat-form-field-infix:default-size field
I need like this filed exact with the text.I need exact like this
stackblitz example reference link, i need to reduce the size of the select field width.
How can I do that changes, can anyone help me?
in style.css add
.mat-form-field-infix {
width: 100px !important;
}
stacblitz demo
Why do you need to specifically set .mat-form-field-infix width when you can more easily control width on mat-form-field?:
mat-form-field {
width: 100px;
}
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)
for my portfolio site, I would like to implement some CSS code that would allow me to control the variables for dynamically scaling images on my Blogger. http://www.bryan3d.com
This means that as you manipulate your window via resizing, the scaling of the images (hosted by imgur) would be resized on the fly.
A working example of this functionality can be seen here, though the user is using Squarespace: http://jasonlavoie.net/personal/#/deusudk-environmentart/
Is there something I can implement to have the same functionality through blogger?
Please see my answer : How do I make an html image responsive?
Add this in you'r css file :
img {
width: 100%;
height: auto;
}
this will affect all img elements. to be more specific, you can use a specific id like :
#headerhj img {
width: 100%;
height: auto;
}
see : http://www.w3schools.com/css/css_rwd_images.asp
I'm using angular ui-grid v3.0.4. I have a case where I need to use a custom cell template with a button and have text below it. I see the styles in Chrome Dev tools but I don't see that ui-grid-cell, ui-grid-row or ui-grid-cell has a height set to 30px like below:
.grid1445012976265 .ui-grid-row, .grid1445012976265 .ui-grid-cell, .grid1445012976265 .ui-grid-cell .ui-grid-vertical-bar {
height: 30px;
}
I'm loading my own stylesheet last and I override some other ui-grid CSS like input[type="text"].ui-grid-filter-input so I know that overriding it works. I have also tried commenting the other styles that I override.
In my grid definition, I set the rowHeight but it the css gets overridden by the above.
enableFiltering: true,
rowHeight:75,
enableRowSelection: true,
Has anyone else run into a similar issue with the ui-grid? Which css did you have to override?
If I uncheck the height: 30px; in dev tools, then the row renders correctly.
TIA
Magnus