On this page:
I can't figure out how to haxxor the CSS so that the green "Sign Up Now" button isn't over top of the textarea field. I want it to display BELOW the input field.
Any ideas?
Go to the css file(woocommerce.css) find this class and add it a margin-top:
.button, a.button.checkout {
background: #6cbe42;
padding-left: 2em;
padding-right: 2em;
margin-top: 50px;
}
The problem is the height set to the container p.form-row-wide of the textarea. Chrome print it visually correctly, but the CSS code makes this result:
So the button 'Sign Up' in your browser overlap the textarea.
To fix it, update your CSS:
.woocommerce form .form-row-wide,
.woocommerce-page form .form-row-wide {
clear: both;
height: auto;
}
Related
At the bottom of my page there are 3 buttons. "Send, Save and Cancel" buttons. The Save and Cancel buttons are the same height but the "Send" button is different from the other two. Why is this happening?
I read on another post that said elements render buttons different from normal buttons so I tried to fix it with the solution given but it didn't work. I also tried removing element but it still didn't work. Thanks for your help!
Buttons Styles
background-color: #8f81e8;
color: #fff;
border-radius: 5px;
text-transform: uppercase;
font-weight: 300;
font-size: 16px;
cursor: pointer;
padding: 1rem;
CodePen
It's because your send is input while other elements are button.
Add border: none; to your css
you can give static height to all three buttons.
You have two different divs: .user-messages (the left one) and .settings the right one.
The left one contains an input, while the right one contains two buttons. So you can either add border:none to the left one to make the border disappear and then re-arrange your layout to use a button instead of an input.
Update
Wrap the buttons into a seperate div below the div of the two pages and do the following:
div {
display:flex;
justify-content:space-around;
}
button {
width: 100%;
margin: 5px; /* or whatever you want to have */
}
<div style="width: 100%; background-color: green;">
<button type="button">A</button>
<button type="button">B</button>
<button type="button">C</button>
</div>
Is the result of my snippet the desired outcome?
Seems to be the display: flex on the settings-btn-box that is causing it. One solution could look something like this:
.settings-btn-box {
/* display: flex; */
}
.settings-btn-box button {
width: 49%;
}
.btn-save {
/* margin-right: 10px; */
}
.btn-cancel {
/* margin-left: 10px; */
float: right;
}
Personally, I'm not a big fan of float, but since it's the last element in the div it should be fine.
I have installed a theme in my WordPress website.
On top of the theme, I have added bbPress (forum)... unfortunately the CSS render very badly the forum features...
for example, the picture below show how the search button overlap with the search box
Search box-button overlapping
If I look at the css I can see this:
element.style {
}
vlog-bbpress.css?ver=1.8.1:9
#bbpress-forums #bbp-search-form {
position: relative;
float: none;
}
bbpress.css?ver….5.14-6684:429
#bbpress-forums #bbp-search-form {
clear: left;
}
what should I change in the css??? (I have installed Simple Custom CSS plugin (https://en-ca.wordpress.org/plugins/simple-custom-css/)so I should not need to do any custom css, but I shoul just be able to add the custom CSS)
in case anyone of you want to have a look at the website, you can find it here (not live yet, just playing around)
http://italiancrypto.it/forums/
many thanks all
Regards
#bbpress-forums #bbp-search-form .button {
margin-top:0;
}
#bbpress-forums #bbp-search-form #bbp_search {
height: 42px;
}
You may need to include !important tags, depending on where your CSS overrides are injected. But only use if necessary.
eg:
#bbpress-forums #bbp-search-form .button {
margin-top:0 !important;
}
#bbpress-forums #bbp-search-form #bbp_search {
height: 42px !important;
}
Add the below CSS to solve alignment of button
#bbpress-forums #bbp-search-form .button {
margin: 0;
padding: 9px 20px;
}
Do some reading on using the Chrome inspect screen--I've added an image to help. To get this screen, right click on the search button.
You'll see the highlighted html code on the left (the input field). On the right, you'll see the css and their values for that field.
See the check mark next to each field>? I clicked on the margin setting to remove it. Then, I clicked on the plus sign in the upper right of the inspect screen.
That lets you key in a temporary value for a new parameter. I keyed in:
margin-top: 0;
You'll see that in the image I attached. Now the button is aligned. The css to place in your style sheet is just above the inserted margin-top field.
You'll see that the button is now aligned with the search field. So Mando's answer should work.
position: relative. That should work
please visit link1 , here everything is fine.
please visit link2
here, 1)i want to move "Add to cart" and " buy now" buttton bit below.
also I want to display the text "Selling Price (Free Delivery )" below "RS 50".
I want to display link2 as like link1.
we are using following code :
.product-ship .sell_price {
color: #848484;
font-size: 12px;
position: relative;
top: -130px;
}
product-view .add-to-cart button.button span {
float: left;
font-size: 16px;
font-weight: normal !important;
text-align: center;
text-transform: uppercase;
your define height: 75px; in your .price-box please it's change into this
.product-view .product-essential .product-shop .price-box{height:auto;}
Add top margin to .product-options-bottom
.product-options-bottom {
padding: 0;
margin-top: 45px;
}
display table and height auto solution of you problem
.product-view .product-essential .product-shop .price-box
{
display:table;
height:auto;
}
Never use the auto value until and unless it is mandatory, otherwise it will take the default height corresponding to the the height value that has been set to that particular division.
Better to give height in pixel(px) as this is dynamic value and can be fitted to any of the screen size.
In order to move you can use tag 2 times.
I think this issue is due to missing of tag. Just try to place tag at after these two button to bring "Buy now" button at the end of the both button.
Same thing is applicable to your test "Selling Price."
Just try and let me know, if the issue persist.
Overall your code is correct.
I have spent a while encouraging an input form and the submit button to display exactly inline (i.e. same height and vertical position) in both Firefox and Safari. But I'm not having much luck; can anyone help?
The current CSS for the 'Keep in touch' widget on this page: www.landedhouses.co.uk is:
form.mc4wp-form p{margin-left:0px !important; display:inline; }
form.mc4wp-form input {width:135px; padding:7px;}
form.mc4wp-form input[type=submit] {width:54px; margin-left:5px;}
But the submit button is still a pixel out. I think the CSS elsewhere is overriding something... any ideas?
Thank you!
I have done some changes in your css try it if it works for you.
#right input[type="submit"] {
clear: both;
cursor: pointer;
display: block;
height: 30px;
}
form.mc4wp-form input[type="submit"] {
margin-left: 19px;
width: 54px;
}
I have 4 buttons in a header div. I have placed them all using margins top and left in css so they are all next to each other in one line. Nothing fancy.
Now I'm trying to do an action when the button is pressed the button text moves down a little bit.
I'm using this code in CSS :
#btnhome:active{
line-height : 25px;
}
HTML :
<div id="header">
<button id="btnhome">Home</button>
<button id="btnabout">About</button>
<button id="btncontact">Contact</button>
<button id="btnsup">Help Us</button>
</div>
Button CSS example :
#btnhome {
margin-left: 121px;
margin-top: 1px;
width: 84px;
height: 45px;
background: transparent;
border: none;
color: white;
font-size:14px;
font-weight:700;
}
Also those buttons work on a header background, I'm sure it has something to do with these settings :
#header {
background-image: url(images/navbar588.png);
height: 48px;
width: 588px;
margin: 2em auto;
}
It works well but the only problem is that the all other buttons also move their text down? Why Is that? Aren't I clearly clarifying that I want to use #btnhome only? All the buttons have completely different ID's. All buttons have the same CSS settings except the margins. What do I need to edit?
Thank you very much.
as I expected, yeah, it's because the whole DOM element is being pushed down. You have multiple options. You can put the buttons in separate divs, and float them so that they don't affect each other. the simpler solution is to just set the :active button to position:relative; and use top instead of margin or line-height. example fiddle: http://jsfiddle.net/5CZRP/
try changing that line-height change to a margin-top or padding-top change instead
#btnhome:active{
margin-top : 25px;
}
Edit:
You could also try adding a span inside the button
<div id="header">
<button id="btnhome"><span>Home</span></button>
<button id="btnabout">About</button>
<button id="btncontact">Contact</button>
<button id="btnsup">Help Us</button>
</div>
Then style that
#btnhome span:active { padding-top:25px;}
Use margins instead of line-height and then apply float to the buttons. By default they are displaying as inline-block, so when one is pushed down the hole line is pushed down with him. Float fixes this:
#header button {
float:left;
}
Here's a working jsfidle.
[type=submit]{
margin-left: 121px;
margin-top: 19px;
width: 84px;
height: 40px;
font-size:14px;
font-weight:700;
}