I am having a problem with my design.
I have two buttons on my product page. However because one is in a form, they are on top of each other(see image ).
I want to get the two buttons next to each other. Can someone help me out, please ? Below I added my HTML and CSS code.
Thanks in advance!
HTML:
<!DOCTYPE HTML>
<div class="container text-center">
<div class="sale">
<h1>On Sale</h1>
<p class="text-secondary">
We have new sales promotions online for a short period of time every day. We offer products from
popular labels and luxury brands in the lifestyle segment up to 75% cheaper than the
recommended retail price.
</p>
</div>
</div>
<section class="on-sale">
<div class="container">
<div class="row">
<?php
for($i = 0; $i < $countProductItems && $i < 4; $i++){
?>
<div class="col-md-3">
<div class="product-top">
<img src="<?php echo ($saleProducts[$i]['imgProduct1']);?>" class="img-fluid" alt="Product1"/>
<div class="overlay-right text-center">
<button type="button" class="btn btn-secondary" title="Quick Shop">
<i class="fa fa-eye text-white"></i>
</button>
<form action="includes/shopping-cart.inc.php?action=add&id=<?php echo ($saleProducts[$i]['ID'])?>" method="post">
<input class="text-center" type="hidden" name="quantity" value="1"/>
<input type="hidden" name="index-page" value="index">
<input type="hidden" name="product-name" value="<?php echo ($saleProducts[$i]['strProductNaam']); ?>">
<input type="hidden" name="product-price" value="<?php echo ($saleProducts[$i]['strSalePrijs']); ?>">
<button type="submit" class="btn btn-secondary " title="Add to cart" name="add_to_cart"><i class="fa fa-shopping-cart"></i></button>
</form>
</div>
</div>
<div class="product-bottom text-center">
<p>
<?php rating_star(($saleProducts[$i]['RatingStar'])) ?>
</p>
<p><h3><?php echo ($saleProducts[$i]['strProductNaam']); ?></h3></p>
<?php sale_product(($saleProducts[$i]['intPrijs']), ($saleProducts[$i]['strSalePrijs']))?>
</div>
</div>
<?php
}
?>
</div>
</div>
</section>
</html>
CSS:
.container .sale{
padding: 3rem 0;
}
.container .sale{
font-family: var(--gugi);
}
.container .sale{
padding: 0.5% 25%;
font-size: 0.9em;
}
.on-sale{
margin: 50px 0;
}
.on-sale img{
width: 100%;
padding: 20px;
transition: 1s;
cursor: pointer;
}
.on-sale img:hover{
transform: scale(1.1);
}
.product-top{
width:100%;
display: inline-block;
}
.product-bottom .fa{
color: orange;
font-size: 10px;
}
.product-bottom h3{
font-size: 20px;
font-weight: bold;
}
.product-bottom h5{
font-size: 15px;
padding-bottom: 10px;
}
.make_red {
color: red;
}
// codefilling text[error] - nfnjsnfjsfnbjkdsnfdsfndjsfbjabsdjhbgdgabadsg
try use display:flex
.overlay-right text-center{
display: flex;
justify-content: space-between;
width: 200px;
margin: 0 auto;
align-items: center;
}
You can give the form a display: inline in your css.
Default display is block for a form
You can try this as well--
button {
display: inline;
margin: auto;
padding: 5px;
}
Related
I want to align it on vertical center. How can I do this?
I have tried many things suggested on stack overflow. I am new to bootstrap 4.
I wan to place logon on top center of login form that why I want form to be on center of the page
<style>
.form-style-5{
max-width: 500px;
padding: 10px 20px;
margin-top:2em;
margin: 10px auto;
margin-bottom: 1em;
padding: 30px;
background-color: #ffffff;
border-radius: 8px;
font-family: Georgia, "Times New Roman", Times, serif;
}
.container{
margin-bottom: 2em;
}
</style>
</head>
<body style="background-color:rgb(20, 96, 131)">
<div class="container" style="padding:50px">
<form class="form-style-5" method="post">
<h1 style="font-family:verdana" class="text-center">Sign up</h1>
{% csrf_token %}
<table>
{{user_form | crispy}}
{{details_form | crispy}}
<button class="btn btn-primary btn-block fa-lg gradient-custom-2 mb-3" type="submit" style="background-color:rgb(20, 96, 131); border: 0px">Sign up</button>
</form>
<hr>
<div class= "row">
<div class="col-sm-6">Login</div>
<div class="col-sm-6">Seller's Sign-up</div>
</div>
</table>
</div>
</body>
</html>
If you mean the entire form itself centered on the page, you could put it in a container strictly for positioning purposes and use viewport units to place it. That way, you're not trying to position the form's container AND trying to format it at the same time. You could use the container class and position with absolute, left, etc, but this seems like a less destructive approach. Let me know what you think. You can manipulate the values as needed if you want the form to be higher up but I just went full center for the example purpose.
.form-style-5 {
max-width: 500px;
padding: 10px 20px;
margin-top: 2em;
margin: 10px auto;
margin-bottom: 1em;
padding: 30px;
background-color: #ffffff;
border-radius: 8px;
font-family: Georgia, "Times New Roman", Times, serif;
}
.container {
margin-bottom: 2em;
}
.position {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
<html>
<body style="background-color:rgb(20, 96, 131)">
<div class="position">
<div class="container" style="padding:50px">
<form class="form-style-5" method="post">
<h1 style="font-family:verdana" class="text-center">Sign up</h1>
{% csrf_token %}
<table>
{{user_form | crispy}} {{details_form | crispy}}
<button class="btn btn-primary btn-block fa-lg gradient-custom-2 mb-3" type="submit" style="background-color:rgb(20, 96, 131); border: 0px">Sign up</button>
</table>
<hr>
<div class="row">
<div class="col-sm-6">Login</div>
<div class="col-sm-6">Seller's Sign-up</div>
</div>
</form>
</div>
</div>
</body>
</html>
I've got two forms on a webpage I'm making. On all the pages I have no forms on, the footer sits neatly at the bottom of the page however as soon as I introduce forms, the footer has some whitespace below it about the same size as the footer and sticks to the form. It should stay at the bottom of the page no matter viewport. I've looked extensively for an answer to this but can't find one.
I tried using this http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page person's blog to fix it but it didn't.
Any help would be greatly appreciated.
body {
background-color: #40E39C;
display: relative;
margin: 0;
padding: 0;
height: 100%;
}
.style1{
border: 2px;
border-radius: 20px;
border-color: #D6B656;
background-color: #FFF2CC;
}
.style2{
border: 2px;
border-radius: 20px;
border-color: #82B366;
background-color: #D5E8D4;
}
.container {
min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom: -142px;
margin-top: 30px;
}
.footer {
background-color: #EAEDD0;
text-align: center;
width: 100%;
}
.footer, .push {
height: 142px;
}
.footer li {
display: inline-block;
}
.footer ul {
text-align: center;
margin: 0;
}
<div class="container">
<div id="restaurant-book">
<form class="style1" style="text-align: center;">
<div style="display:inline;clear:both;">
First name: <br/><input type="text" name="firstName" required/><br/><br/>
Last name: <br/><input type="text" name="lastName" required/><br/><br/>
</div>
<div style="display:inline;clear:both;">
<?php if (isset($_POST["date"])){?>
Booking date: <br/><input type="date" value="<?php echo $_POST['date'] ?>" required/><br/><br/>
<?php } else {?>
Booking date: <br/><input type="date" required/><br/><br/>
<?php } ?>
</div>
<div style="display:inline;clear:both;">
<?php if (isset($_POST["time"])){?>
Time: <br/><input type="time" min="09:00:00" max="22:00:00" step="1800" value="<?php echo $_POST['time'] ?>" required/><br/><br/>
<?php } else {?>
Time: <br/><input type="time" min="09:00:00" max="22:00:00" step="1800" required/><br/><br/>
<?php } ?>
</div>
<div style="display:inline;clear:both;">
Number of adults: <br/><input type="number" max="10" required/><br/><br/>
</div>
<div style="display:inline;clear:both;">
Number of children (0-11 years): <br/><input type="number" max="10" required/><br/><br/>
</div>
<div style="display:inline;clear:both;">
Number of tables: <br/><input type="number" max="5" required/><br/>
</div>
</form>
</div>
<div class="push"></div>
</div>
<footer class="footer">
<ul>
<li>A | </li>
<li>B | </li>
<li>C | </li>
<li>D | </li>
<li>E | </li>
<li>F </li>
</ul>
</footer>
I think I got you, try adding this to your css BUT first remove the "push" div
.footer {
background-color: #EAEDD0;
text-align: center;
width: 100%;
position: fixed;
bottom: 0;
}
This is my HTML:
<div class="row trolibelanja">
<div class="col-md-3">
<img src="http://2.bp.blogspot.com/-WGiyrP7xGOk/VQlHwjgporI/AAAAAAAABHI/zLGXTH0-H2w/s1600/Mie%2BAyam%2B(4).jpg" class="detailfoto">
</div>
<div class="col-md-4">
<p class="detailnama">Mie Ayam Bakso</p>
<p class="detailtoko">Toko Bu Lastri</p>
</div>
<div class="col-md-2">
<p class="detailharga">Rp. 30.000</p>
</div>
<div class="col-md-2">
<div class="input-group">
<span class="input-group-btn">
<button class="btnjumlah" type="button">-</button>
</span>
<input type="text" class="form-control jumlah" value="1">
<span class="input-group-btn">
<button class="btnjumlah" type="button">+</button>
</span>
</div>
</div>
<div class="col-md-1">
</div>
</div>
This is my css:
body{
background-color: #661f61 !important;
font-family: 'Saira Extra Condensed', sans-serif !important;
}
.container-fluid.keranjang {
background-color: #e9e9e9;
flex: 1;
}
.container.keranjang {
}
.row.trolibelanja {
background-color: #e1e1e1;
position: relative;
padding-top: 10px;
padding-bottom: 23px;
}
.row.trolibelanja:after{
background-image: -webkit-linear-gradient(135deg, #6e1c64 25%, #e27f31 25%) !important;
position: absolute;
content: " ";
width: 100%;
height: 15px;
bottom: 0;
}
.detailfoto {
width: 100%;
height: 110px;
border: 6px solid white;
}
.detailnama{
font-size: 20px;
font-weight: bold;
}
.detailtoko{
line-height: 20px;
margin: -17px 0px;
}
.detailharga{
font-size: 20px;
font-weight: bold;
text-align: center;
}
.input-group .jumlah {
width: 50%;
text-align: center;
}
.input-group .btnjumlah {
background-color: #e27f31;
color: white;
border: 0;
font-size: 20px;
font-weight: bold;
padding: 0px 10px;
height: 100%;
}
I am trying to put text and form next to photo using bootstrap, as in photo below:
enter image description here
My code result:
enter image description here
Please let me know what am I missing? I tried each combination of display that i know, but they wouldn't work. Thank you
Arrange your columns properly. And you will be good. put image in one column (col-md-3 in this case) and rest of the content in another (col-md-9), then put all rest of the content in a new row. I would suggest that you have a better understanding of the rows and columns from bootstrap website.
https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
<div class="row trolibelanja">
<div class="col-md-3">
<img src="http://2.bp.blogspot.com/-WGiyrP7xGOk/VQlHwjgporI/AAAAAAAABHI/zLGXTH0-H2w/s1600/Mie%2BAyam%2B(4).jpg" class="detailfoto">
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-4">
<p class="detailnama">Mie Ayam Bakso</p>
<p class="detailtoko">Toko Bu Lastri</p>
</div>
<div class="col-md-2">
<p class="detailharga">Rp. 30.000</p>
</div>
<div class="col-md-2">
<div class="input-group">
<span class="input-group-btn">
<button class="btnjumlah" type="button">-</button>
</span>
<input type="text" class="form-control jumlah" value="1">
<span class="input-group-btn">
<button class="btnjumlah" type="button">+</button>
</span>
</div>
</div>
</div>
</div>
</div>
Add flex-wrap: nowrap; to your .row.trolibelanja like this:
.row.trolibelanja {
background-color: #e1e1e1;
position: relative;
padding-top: 10px;
padding-bottom: 23px;
flex-wrap: nowrap;
}
I made codepen example with your code: https://codepen.io/anon/pen/wPZoXX
i ran your code on bootsnipp and found everything is placed side by side to each other, except for the fact that you did not add img-responsive to the image class. and that the below code is distorting your design.
.row.trolibelanja:after{
background-image: -webkit-linear-gradient(135deg, #6e1c64 25%, #e27f31 25%) !important;
position: absolute;
content: " ";
width: 100%;
height: 15px;
bottom: 0;
}
dont you what you intent designing with that, but i think you need to run a check that css code .
when i added your css to it, it distort the whole code.
first review your CSS is well written , targeting the right class.
second add img-responsive to the img class and i think you are good
to go.
And this is the website http://www.onetechsearch.com/recipes/?search=&images=1&from=&to=&cat=all
I have a question, I have two elements, my log (which is in html) and an arrow with a php script, and I wanted to put them next to each other. The arrow only shows on media devices, but I can't figure out a way to put them next to each other.
Search.php
<style type="text/css">
.mylogo
{
margin: auto;
display: block;
}
</style>
<div class="site-wrap">
<div id="left-sidebar">
<div id="as-button"><i class="fa fa-arrow-circle-o-down" aria-hidden="true"></i></div>
<script>
jQuery(document).ready(function(){
jQuery('#as-button').on('click', function(event) {
jQuery('#as-button').toggleClass('pressed');
jQuery('#advanced-search').toggle(0,'show');
});
});
</script>
<html>
<img src="https://i.imgsafe.org/98e95c17ab.png" width="50%" title="OneTechSearch" class="mylogo" alt="OneTechSearch" />
</html>
<div id="advanced-search">
<form action="recipes" method="GET" id="searchF1">
<input id="sfield" type="text" name="search" placeholder="keywords" <?php if (!empty($searched_term)) {
echo 'value="'.$searched_term.'"';} ?>>
<td>
<div id="picture-side">
<label for="picture">
<input type="radio" name="images" value="1" id="picture" label class="radio-inline"
<?php if(isset($_GET["images"]) && $_GET["images"]=='1'){ echo 'Checked';} ?>>With Pictures</label></option>
</div>
<div id="picture-side1">
<label for="picture2">
<input type="radio" name="images" value="0" id="picture2"
<?php if(isset($_GET["images"]) && $_GET["images"]=='0'){ echo 'checked';} ?>>Without Pictures</label></option>
</div>
</td>
And this is part of the code regarding the arrow
Styles.css
#advanced-search #as-button {
color:#fff;
padding:0.75em;
float:right;
margin: auto;
cursor:pointer;
height:80px;
border-radius:5px 5px 0 0;
}
#advanced-search #as-button.pressed{
background:#333;
}
#advanced-search #as-button i{
padding:0 0.5em;
font-size:2em;
#advanced-search #as-button .fa-search-plus {
font-size:1.4em;
#advanced-search #as-button {
display: block;
font-size: 1.3em;
padding: 0 !important;
width: 60%;
height:auto;
border-radius:5px;
}
#advanced-search #as-button i {
font-size: 2em;
padding: 3px 5px;
}
#advanced-search #as-button.pressed { background:none;}
#advanced-search #as-button.pressed i{ background:#333;}
Im having trouble getting rid of the border at the bottom of my website, www.goodlord.co. It is a single page scroller.
The last image is the problem I need to extend it to the end of the whole website but each time i do that the website its self extends. I would really appreciate any help.
Tom
This is the Style Sheet for the section css.
section{ background: #fff; }
body{ -webkit-font-smoothing: antialiased; #fefefe; }
#main-container{ overflow: hidden; }
input{ -webkit-appearance: none; }
input:focus{ outline: none; }
.nopad{ padding: 0px; }
.offix{ overflow: hidden; }
.pad-normal{ padding-top: 66px; padding-bottom: 34px; }
.pad-large{ padding-top: 60px; padding-bottom: 60px; }
.pad-end{ padding-top: 60px; padding-bottom: 60px; }
.pad-large-top{ padding-top: 99px; }
.pad-large-bottom{ padding-bottom: 99px; }
.pad-top{ padding-top: 66px; }
.pad-bottom{ padding-bottom: 66px; }
.space-top{ margin-top: 22px; }
.space-top-large{ margin-top: 44px; }
::selection {color:#fff;background:#444444;}
::-moz-selection {color:#fff;background:#444444;}
This is the index for the section.
<a id="contact-scroll"></a>
<section id="contact" class="text-divider bg-cover pad-end">
<img alt="Slider Background" class="divider-bg" src="img/estate.jpg" />
<div class="divider-overlay"></div>
<div class="row divider-content">
</div>
<div class="row divider-content">
<div class="medium-8 medium-centered columns">
<form id="contact-form" class="text-center">
<h1 class="text-white">Get in touch</h1>
<input id="form-name" type="text" placeholder="Name" />
<input id="form-email" type="text" placeholder="Email" />
<input id="form-msg" type="text" placeholder="Message" />
<div class="text-right">
<span id="details-error" class="text-white">*Error: Please complete all fields correctly</span>
<span id="form-sent" class="text-white">Thankyou, your enquiry has been sent!</span>
<div class="btn white-btn clear-btn"><h6 class="alt-h text-white">Clear</h6></div>
<div id="form-btn" class="btn white-btn"><h6 class="alt-h text-white">Send</h6></div>
</div>
</form>
</div>
</div>
Having a look, that last white border is actually padding, not border.
the final section with ID '#work' has the '.pad-large' class on it. remove it and the final image should butt up right to the bottom of the page.
You might need to restore the top padding of the item, as .pad-large adds 60px padding to the top and bottom of the item.