http://boutique40.com/
I want to align the 2 social icons exactly in the center. And actually to do that I want to set to the twitter icon the width value of 80px, but I can't do it. I only manage to do that in the browser editor; I can't seem to select the right class and element.style overides it whatever I do. What is this?
element.style {
width: 110px;
height: 20px;
}
I don't wont to wrap the whole button to change the size (or should I?). The code that should be working is this:
.twitter-share-button { vertical-align:top;
margin-left:10px; width: 80px;}
In Chrome's developer tools element.style shows any inline styles that are applied to the selected element.
To override them use !important
So to set the button width to 80px you could use:
.twitter-share-button {
width: 80px !important;
}
Try using a local style on the button itself, by using the style attribute:
style = "width: 80px;"
the local style should overwrite it.
Related
I have a page with a searchable table, when someone use the text box to search for data the jQuery code will give live results "like google search suggestion" but inside the table itself.
When there is no text inside the search text box, the table show all data inside it. and the background work great on that, no matter how long the page is.
My problem is when someone search on specific thing and the table only show a few data like "1 or two" the background crop and a blank white background appear in the footer.
What am I doing wrong?
Here is my CSS:
body {
margin: 30px 0 0 0;
background: url(https://example.com/how/900.jpg) no-repeat center center fixed;
background-size: cover;
color: #000000;
height: auto;
}
Add this as the first rule in your stylesheet
{
html, body{ height:100%; }
}
Remove height: auto; from you body selector.
Since you did not "reset" your styles, the browser is using the default one, and sadly the default style for the body does not render it as at least the full height as the viewport allows
Change height: auto to height: 100vh will resolve your issue. Thanks
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;
}
I need to change the container padding. Particularly the width. I tried to find the code in style.css and found this code.
.center{ width:85%; margin:0 auto;}
I adjusted the width to 100% but it took the logo and the menu bar to the left side with itself.
I am searching for the solution to this. Also I want to apply this css code to only one page.
If you're changing the width, you're going to change how that element interacts with other elements, so changing the width is a bad idea.
You should stick to just changing the padding.
.center {
width: 85%;
margin: 0 auto;
padding: 10px; //insert whatever padding you want here
}
If this is affecting the width of the element, then try applying:
.center {
//your existing css for this selector, then:
box-sizing: border-box;
}
If you want to apply this change to one page only, your best bet is probably to add a class to the html element that you're trying to modify and target that class with your new padding.
I have a requirement, where i need to write CSS based on control current width.
Example: Let say i have DIV, If i place this div in side menu bar(say, menu width="300px;"), i want to set font size 8px and if i place this DIV in main content area(say, menu width="700px;"), I want to set font size 15px.
How to acheive this scenerio using CSS ?
I know, we can write something like this with media query, but media query is based on viewport width, not parent container width.
Take advantage of the C̀²ascading part of CSS:
.menuBar .myDiv
{
font-size: 8px;
}
.mainContent .myDiv
{
font-size: 15px;
}
.side-menu div{
font-size:8px;}
.main-content div{ font-size:15px;}
I installed Thank you plugin but the button on my test site looks strange.
I found out why. Because it inherits #commentform textarea { width: 45%; } from my theme. If I remove the width from css the button looks ok. Any idea how I can fix that? Of course I do not want to remove width for #commentform textarea. Can I do something about that on css level of the button? Something like width:not-inherit; width:reset; I'd say that the width of the button wouldn't be declared at all if there was no #commentform textarea
Try putting
width: auto;
on the button. That should fix it in this case.
It is an old question but I just had the same problem with width inherit from parent as 100%. Turns out adding display property to inline-block helps.
display: inline-block;
you can add "!important" to the newer css.
ex :
first{ float:right;}
second{ float:left !important;}
<div class="first second"></div>
This div should be float left
Put this in your css and also remove that inline styling you have there for that button:
input.thanks_button{
background:url("http://asha.onalllevels.com/wp-content/plugins/thanks-you-counter-button/images/thanks_compact_blue1.png") no-repeat;
color:#fff;
font-family:Verdana,Arial,Sans-Serif;
font-size:14px;
font-weight:normal;
width:auto !important;
}