I am attempting to remove the hover effect padding on a Wordpress plugin called "Smart logo showcase". Here is the test page I have been working on:
http://brainstormmarketing.agency/dev/afroteqadvisory/test-clients/
So basically just the logo needs to be hoverable with no extra padding around it.
I have tried various code snippets and the class is called .smls-grid-image-wrap for the entire logo block.
I have tried to use padding: 0; but with no luck. Please assist
Because min-height and min-width are applied.
You can try tu use these properties for disable that
min-height: inherit;
max-height: inherit;
padding: 0;
Then, if you want to add spaces between elements you can add margin
Or, you can "hack" this with transparent background instead of color #d5fcfd
You can try
background-color: transparent;
Add this css:
.smls-hover-type-2 .smls-grid-image-wrap:hover {
background-color: transparent;
}
Related
I am trying to add background-image to mat-dialog, by spending some time on mat-dialog docs I realised that I can use panelClass: 'my-class', to customize mat-dialog appearance, here my-class end up getting applied to div having class cdk-overlay-pane in mat-dialog, something like this.
Then I added this css to put the background-image in the matt-dialog.
.my-class .mat-dialog-container {
background: url("assets/illustrations/abc.svg") no-repeat;
padding-bottom: 16px !important;
}
.my-class {
// background: white !important;
border-radius: 10px;
}
eventually mat-dialog ended up looking like this, having transparent background.
In order to solve this issue I ended up adding background: white; to my-class and then it looked like this.
Everything seems to work fine, but it is now bit-buggy as soon as I close the dialog a white background of the same size is theres for milliseconds and then it disappears.
I managed to solve the problem by changing the way I was doing it, sometimes it's easier to change the approach instead of trying to find the solution of situation that you are struck on.
what I did is as follows.
In the attached image div having class='content represents the content of the dialog-box, so it's basically a div that we place as a wrapper on the content we want to display in mat-dialog, in my case I named it content.
So I modified the .mat-dialog-container padding to 0, so that content div can take the full height and width, and then added background-image to content div.
.my-class .mat-dialog-container {
padding: 0px !important;
}
Final outcome can be seen in the below-mentioned image.
The problem is I am using BootSlider.js that I cam across online, and it does everything that i require it to, apart from one thing. The actual slider set white-space:none on its main div.
So as you will see in the slider panels in the url above, I have text in each panel that needs to wrap. This text is in a tag. If I set white-space: wrap on the SPAN in each panel, then you will see that the more wrapping text, the further away from the top each panel sits.
I have tried to see what the CSS problem is but am stuck - would be great if anyone could help?
It's using bootstrap 3 no option to use 4 sadly.
Try to add this rules to .index-inner1
.index-inner1 {
display:flex; /* add this line */
flex-direction: column; /* add this line */
padding: 8px !important;
min-height: 290px !important;
cursor: pointer !important;
}
I'm designing a website, I'm trying to get a simple coloured div across the top of the browser, I've tried simply using:
div{
width:100%;
}
but noticed there's white space on either side and on top of the screen.
I'm looking for something similar to the blue header on Facebook that fills the entire screen.
Any suggestions how to accomplish this?
There is always some margin and padding in all browsers for the body. So, try doing the following and recheck the results:-
*{margin: 0; padding: 0;}
The above code will remove all the extra margins and paddings from all the tags!
You should use normalize.css for a kick-start designing of your applications though.
did the body have margin?
Try adding:
body {
margin: 0;
padding: 0;
}
or use a reset for styles like: http://necolas.github.io/normalize.css/
It's because of default styles of your browser, use this to reset it:
* {
margin: 0;
padding: 0;
}
Demo
Besides that, I'd suggest you take a look at css reset which give you a set of CSS rules that resets the styling of all HTML elements to a consistent baseline.
here is the site with the issue
I want the opaque bar which is its own div to appear behind the div with the text. Both of those obviously in front of the image.
My issues are:
1) I can't get the div titled "fp-banner" to shrink to a height of 70px while containing the text inside.
2) The white border keeps extending all the way to the bottom and I have no idea why.
I'm trying to post all of the code here but when I copy and paste it the html actually appears so I guess I won't post it.
Thank you.
Let me address issue #2 first - the white border extends below the featured post image because you have the border applied to the container element (#featured-post) instead of the image itself (#featured-post img)
So change the CSS for #featured-post to:
#featured-post {
float: left;
width: 370px;
margin-left: 10px;
padding:0;
}
and the CSS for #featured-post img to:
#featured-post img {
border: solid 3px #fff;
z-index: -1;
margin:0;
padding: 0;
}
For issue #1, add this to #fp-banner:
height:70px !important ;
and add this to your CSS:
#fp-banner p { line-height:14px ; margin-bottom:8px }
You may need to adjust the margin-bottom value for the #fp-banner p styling to fit in the 70px height.
NOTE: Don't forget to make a backup of your style.css before you make these changes, just in case :)
Hope this helps!
Best,
Cynthia
I don't know how it has occurred and for the life of me, I cannot fix it.
I have a div which is hidden using display: none;
When a user clicks, I set display: block which shows a new layer.
The problem is that all the text is showing through from the layer behind it... How do I force no transparency from a div behind?
I have set no transparency or opacity in my css.
The layer I am showing only has the following settings:
.display {
background: rgb(255, 255, 255) url(/template/mobile/images/dot.gif) repeat left top;
display:none;
width: 250px;
height:100px;
border: 1px solid rgb(20, 20, 20);
margin-left: -5px;
margin-top: -100px;
float: left;
z-index: 999;
}
As you can see:
I've tried using a 1px background image - still transparent
I've set the background color to white - still transparent
I've tried setting the z-index so it is on top of everything - still transparent
I don't know why it is and how i stop it???
NOTE: I have deactivated the live site and this code can be viewed in testing at: http://dev.cutmyhair.com.au/search_results.php?keyword=waverley
NOTE: This issue is only occurring on the .mobi version of the site (so you need to view it on a mobile phone OR using a mobi emulator)
I was able to reproduce this using FF3 and IE8.
You need to set position to either absolute or relative.
.display {
position: absolute;
...
}
or
.display {
position: relative;
...
}
Are you sure it's a transparency issue? I see another problem:
height:100px
margin-top: -100px
This two together would make your div stay totally out of the page, if the float property is influenced by other elements around. Maybe post here the html portion and other related css rules, so I can understand the situation better. Anyway, first of all, be sure that your div is in the place you think it is, by using a good html/css debugging tool like Firebug or Chrome dev console.
Try using display:inline-block (instead of block). It seems to work better (more intuitively) with floated elements.