Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
i created a round border button that shows some numbers in it.
I tried to center the numbers in the different buttons, but text-align and vertical-align could not help to center the number in every dimension (vertical and horizontal).
Can you please help me to achieve that goal?
here is my code:
http://jsbin.com/nefuhukuja/edit?html,css,output
Thank you
EDIT:
I also got problems to do this with the text below the buttons
Here is CSS
.minus
{
text-align:center;
}
.countdown-overlay .col-lg-2 p{
color: #cfd8dc;
font-size: 20px;
margin-top: 10px;
}
.btn span{
color: #cfd8dc;
font-size: 70px;
}
.btn-circle{
border: 7px solid #cfd8dc;
border-radius: 130px;
font-size: 12px;
height: 130px;
line-height: 1.428571429;
padding: 10px 0;
width: 130px;
text-align: middle;
}
.btn-circle.btn-lg{
border: 7px solid #cfd8dc;
border-radius: 130px;
display: inline-block;
font-size: 18px;
height: 130px;
line-height: 1.33;
padding: 10px 16px;
width: 130px;
vertical-align: center;
}
.btn-circle.btn-xl{
border: 7px solid #cfd8dc;
border-radius: 130px;
font-size: 24px;
height: 130px;
line-height: 1.33;
padding: 10px 16px;
width: 130px;
vertical-align: center;
}
button .minus{
text-align: center;
margin:auto;
vertical-align: center;
}
.btn-circle span{
vertical-align: center;
margin: auto;
text-align: center;
}
.countdown-overlay{
margin: 20px auto 0 auto;
text-align: center;
}
#media only screen and (max-width: 760px) {
button.btn.btn-circle.btn-lg
{
height:70px;
width:70px;
border-radius:70px;
border-width: 5px;
padding-right:25px;
margin-left:-10px;
}
button .minus
{
text-align:center;
vertical-align: center;
font-size:30px;
}
}
Here is HTML and script
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="row countdown-overlay" style="z-index:2">
<div class="col-xs-3 col-lg-2 col-lg-offset-2">
<script src="js/countdown.js"></script>
<button type="button" class="btn btn-default btn-circle btn-lg"> <span class="minus" id="day">-</span></button>
<p>days</p>
</div>
<div class="col-xs-3 col-lg-2">
<button type="button" class="btn btn-default btn-circle btn-lg"> <span class="minus" id="hour">-</span></button>
<p>hours</p>
</div>
<div class="col-xs-3 col-lg-2">
<button type="button" class="btn btn-default btn-circle btn-lg"> <span class="minus" id="minute">-</span></button>
<p>minutes</p>
</div>
<div class="col-xs-3 col-lg-2 ">
<button type="button" class="btn btn-default btn-circle btn-lg"> <span class="minus" id="second">-</span></button>
<p>seconds</p>
</div>
</div>
</body>
</html>
Reason is padding-right. You must remove padding-right for your class: button.btn.btn-circle.btn-lg inside your #media only screen and (max-width: 760px) {...}.
Check this out.
You are forcing the content to left inside by giving padding-right
Update:
The above solution solves your issue for only if you have two digits in a circular div. If you want more to cover(Like 3 digits: xxx).
You either need to try among following:
1) Increase dimensions for circle (class: .button.btn.btn-circle.btn-lg)
Or
2) Decrease the font-size for .minus class/div.
No other alternative i guess is more suitable.
Related
I am checking my website different resolutions and browsers using Dev Tools and www.responsinator. in the web site I have used the owl Carousel, but in iPhone XR (414896) or iphone 12 pro (390844) or samsung galaxy (412 * 912) it is messed up.
in real it is like this
but on those resolution it is like this
this is the code for this part:
.cart-col {
width: 100%;
padding: 10px;
border: 1px solid #e2efef;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.29);
position: relative;
display: inline-block;
background: #fff;
border-radius: 10px;
margin-bottom: 15px;
}
.cart-title {
font-size: 13px;
font-family: IRANSans;
font-weight: bold;
padding-right: 7px;
display: inline-block;
}
.btn-filter {
background-color: #ffffff;
font-size: 14px;
outline: none;
cursor: pointer;
border: 1px solid #ccc;
vertical-align: middle;
width: 100px !important;
float: right;
margin-right: 15px;
margin-top: 15px;
}
.btn-filter>a {
color: #ccc;
display: flex;
align-items: center;
justify-content: center;
margin: 10px;
}
.btn-filter>a:hover {
color: black;
}
.img-filter {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
.filter-title {
font-size: 12px;
font-family: IRANSans;
padding-right: 7px;
display: inline-block;
margin-top: 20px;
}
.filter-option {
font-size: 12px;
font-family: IRANSans;
padding-right: 7px;
}
<!-- ----- Bootstrap-4 ----- -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- ----- Body ------------ -->
<div class="col-lg-2 col-md-2 col-sm-12 mr-1 ml-2 cart-col fixed" style="height:650px;">
<div class="cart-title">Filter </div>
<div>
<hr /> </div>
<div class="filter-title">Select the options </div>
<div>
<div class="btn-filter">
<a asp-controller="" asp-action="">0-2 </a>
</div>
<div class="btn-filter">
<a asp-controller="" asp-action="">3-5 </a>
</div>
</div>
<div>
<div class="btn-filter">
<a asp-controller="" asp-action="">6-8</a>
</div>
<div class="btn-filter">
<a asp-controller="" asp-action="">8-12 </a>
</div>
</div>
<div>
<div class="filter-title">Select the type </div>
<div>
<select class="form-control filter-option" id="BookType" asp-items="#ViewBag.BookType">
<option value="">vocal </option>
</select>
</div>
</div>
<div>
<div class="filter-title">select the subject </div>
<div>
<select class="form-control filter-option" id="BookSubject" asp-items="#ViewBag.BookSubject">
<option value="">comic</option>
</select>
</div>
</div>
<div class="img-filter"><img src="~/images/filter.jpg" /> </div>
how can I make adjustable for this resolution
Update
=============================
I checked my code and I found that I have search input in my layout
<form asp-action="Index" asp-controller="Products" method="get" class="form-inlineflex">
<input type="search" class="header-search-input d-inline-flex" name="SearchKey">
<div class="action-btns d-inline-flex ">
<button class="btn btn-search" type="submit">
<i class="bi bi-search "></i>
</button>
</div>
</form>
with CSS:
.header-search-input {
background: #f0f0f0;
font-size: 12px;
height: 24px;
padding: 0;
outline: none;
}
if I remove this class from input box, so everything will be ok in any resolution and browser, but things will be messy in a few resolution as soon as I set that class to the inputbox
can anyone give me a clue for the reason?
I'm currently attempting to build a basic website using HTML, CSS and Javascript. However there's a specific part of this website that I'm having difficulty building. Here's what the section is meant to look like, with the part on the left being the part that's tripping me up the most. It's a section which is meant to contain four basic squares next to each other; Image 1 (linked earlier) provides a visual.
Here's an image of what I've currently managed to get: All four squares are present, but they're stacked on top of one another instead. I haven't been able to get much closer to it.
Here's the html code behind it:
<div class="top-large-left">
<h3 id="hot">Interaction</h3>
</div>
<div class="small-top-right">
<h3 id="item">Location</h3>
</div>
<div class="large-left-section">
<div>
<section class="left-section">
<div class="btn-group button">
<div class="button1">
<button type="button1">Display X, Y</button>
</div>
<div class="button2">
<button type="button2">Theme</button>
</div>
<div class="button3">
<button type="button3">Modal</button>
</div>
<div class="button4">
<button type="button4">Swap Image</button>
</div>
</section>
</div>
As well as the CSS:
.btn-group button {
background-color: #428bca;
border-radius: 5px;
font-weight: bold;
font-size: 15px;
color: white;
padding: 32px 19px;
cursor: pointer;
display: inline-block;
margin: 2px 2px;
border: 1px;
text-align: center;
line-height: 25px;
}
.button1 {
width: 130px;
}
.button2 {
width: 130px;
}
.button3 {
width: 130px;
}
.button4 {
width: 130px;
}
How would I be able to achieve what is being shown in the first image? Is the css-grid function what I need to use, or something else? Feel free to say if I need to provide any more information, thanks.
Flex is your solution here. Flex makes your life easier.
Run the snippet on full window. (Full page)
.top-large-left {
background-color: #428bca;
padding: 0 1rem;
}
.top-large-left h3 {
margin:0;
}
.wrapper {
display:flex;
flex-direction:row;
}
.large-left-section,
.large-right-section{
flex: 1 1 50%;
border: 10px solid lightgrey;
text-align: center;
margin:5px;
}
.btn-group button {
background-color: #428bca;
border-radius: 5px;
font-weight: bold;
font-size: 15px;
color: white;
padding: 32px 19px;
cursor: pointer;
display: inline-block;
margin: 2px 2px;
border: 1px;
text-align: center;
line-height: 25px;
}
.large-left-section .left-section .btn-group.button{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.large-left-section .left-section .btn-group.button .btn {
flex: 0 0 45%;
margin:5px;
}
.large-left-section .left-section .btn-group.button .btn button {
width:100%;
}
<div class="top-large-left">
<h3 id="hot">Interaction</h3>
</div>
<div class="wrapper">
<div class="large-left-section">
<section class="left-section">
<div class="btn-group button">
<div class="btn button1">
<button type="button1">Display X, Y</button>
</div>
<div class="btn button2">
<button type="button2">Theme</button>
</div>
<div class="btn button3">
<button type="button3">Modal</button>
</div>
<div class="btn button4">
<button type="button4">Swap Image</button>
</div>
</div>
</section>
</div>
<div class="large-right-section">
</div>
</div>
I wish to set multiple buttons to equal width in a container. I also wish to get the button to resize when it is in landscape mode or wider screen. How am I able to achieve that?
What I am trying to achieve is as follow
But what I get when I switch it back to Potrait
The code is in JSFiddle JSFiddle Code
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
.card{
border:0px solid;
position:relative;
height:200px;
background:url("https://preview.ibb.co/kJvJ5e/1847p.png") no-repeat top center;
background-size:cover;
}
.card img {
width:100%;
}
.search-box {
position : absolute;
display:inline-block;
bottom:-30px;
left:0;
right:0;
padding:15px;
text-align:center;
}
.drop-shadow {
-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, .5);
box-shadow: 0 0 10px 1px rgb(211, 211, 211, 0.8);
border-radius:0px;
}
.container-fluid{
width:auto
}
.container-fluid.drop-shadow {
margin-top:2%;
margin-left:5%;
margin-right:5%
}
#child{
width:100%;
height: 20px;
margin: auto;
text-align: center;
margin-top: 40px;
}
.form-group {
width:100%;
margin-bottom:10px;
}
.btn-checkin{
display: inline-block;
text-align: center;
white-space: nowrap;
color: #fff;
border-color: #EC008c;
text-transform: uppercase;
background-color: #EC008c;
font-family:'Open Sans','Helvetica Neue',Arial,sans-serif;
padding: 0.375rem .75rem;
font-size: 13px;
border-radius: .25rem;
}
.icon-addon {
position:relative;
}
.icon-addon label {
position: absolute;
left: 2px;
top: 2px;
padding: 8px;
font-size: 20px;
}
.icon-addon input {
height:40px;
padding-left:35px;
}
.currentposition{
position: -webkit-sticky;
position: sticky;
right:20px
}
.wrap {
width: 100%;
height: 50px;
padding-top: 10px;
padding-bottom:10px;
text-align: center;
}
button{
margin-left: 15px;
display: inline-block;
text-align: center;
white-space: nowrap;
color: #000000;
border-color: #B9E5fB;
text-transform: uppercase;
background-color: #B9E5fB;
font-family:'Open Sans','Helvetica Neue',Arial,sans-serif;
padding: 10px 10px;
font-size: 13px;
border-radius: 10px;
width:20%;
}
button:first-child{
margin-left: 0;
}
<body id="page-top" style="font-family:Arial">
<div class="card" >
<div class="search-box">
<div class="form-group">
<div class="icon-addon addon-lg">
<input type="text" placeholder="Search classes" class="form-control" id="searchBar">
<label for="searchBar" class="glyphicon glyphicon-search" rel="tooltip" title="searchBar"></label>
</div>
</div>
<button class="btn-checkin" style="font-family:Arial">Check in</button>
</div>
</div>
<div id="child">
<div class="container-fluid">
<img src="img/location.png" class="pull-left" style="width:25px;height:20px;padding-left:10px" />
<p class="pull-left" style="padding-left:10px;font-family:Arial">Current Location <b>Sri Petaling</b></p>
</div>
<div class="container-fluid drop-shadow">
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="img/7557.jpg" style="width:104px;height:64px;padding:10px 10px 10px 5px" alt="Generic placeholder image">
</a>
</div>
<div class="media-body">
<h5 class="media-left" style="padding-top:12px;color:#B9E5fB;font-family:Arial" >PERSONAL TRAINING</h5>
<p class="pull-left" style="font-size:12px;font-family:Arial;padding-top:3px">Strike Academy Fitness</p>
</div>
</div>
</div>
<div class="container-fluid drop-shadow" style="margin-top:20px">
<div class="container">
<p class="pull-left" style="font-size:12px;font-family:Arial;padding-top:3px">Plan your time</p>
</div>
<div class="wrap">
<button>All</button>
<button >Morning</button>
<button >Afternoon</button>
</div>
<div class="wrap">
<button>Evening</button>
<button>Tomorrow</button>
<button>This Week</button>
</div>
</div>
</div>
</body>
Results still not working? Please help
You can use bootstrap grid to achieve your goal. Wrap your buttons inside bootstrap columns as below. This creates columns of equal width and your buttons reside within each columns.
<div class="row">
<div class="col"> <button class="mybtn"> All </button> </div>
<div class="col"> <button class="mybtn">Morning</button> </div>
<div class="col"> <button class="mybtn">Afternoon</button> </div>
</div>
You can add spacing between your buttons by providing a margin:
.mybtn
{
margin:0 5px;
}
Read more Here
Use col-md-4 for medium size devices, col-sm-4 for small devices, col-xs-4 for extra small devices.
Try this link.
http://jsfiddle.net/my5hdu6k/7/
To settle the button the way you want, you need to limit the width of them not exceeding 33.33% of total width in any screen size.For that, you need to use parent row div and wrap each button inside col div as shown in the code below.
<div class="wrap">
<div class="row">
<div class="col">
<button>Button 1</button>
</div>
<div class="col">
<button>Button 2</button>
</div>
<div class="col">
<button>Button 3</button>
</div>
</div>
Then, you have to trick the text to be ellipsis to safe guard the exceeding text for the smaller screen ( this may not be require for your this instance but it is good practice to plan for worst ). Look closely to the changes I made for the .button class in CSS.
.wrap {
width: 250px;
height: 50px;
padding: 25px;
text-align: center;
display: inline-block;
width:100%;
}
.col{padding:0 5px;display:inline-block;width:33.33%;}
.row{margin:0 -5px;} /* Customized the .row class of bootstrap */
button{
margin:5px 0; /* to undo your older style */
width:100%;
text-overflow: ellipsis;
white-space:nowrap;
overflow:hidden;
}
button:first-child{
margin:5px 0; /* to undo your older style */
}
Please check the provided jsfiddle
I am trying to achieve the following: I am using bootstrap, standard btn class.
So far I the background image is kind of in the correct position, but it gets cut off. I've tried overflow: visible; etc...
.btn {
background: url('../images/button.svg') no-repeat;
background-repeat: no-repeat;
background-position: left;
padding-left: 80px;
}
<button class="btn btn-default btn-lg">GET A FREE QUOTE <i class="fa fa-chevron-right" aria-hidden="true"></i></button>
Thanks for any help
Hello you can use this code below, I have uploaded your png file to mediafire. I also removed the background of your image. Here is the link: http://www.mediafire.com/view/ddv9ce54d08488m/Ky5ME_burned.png
<!DOCTYPE html>
<html>
<head>
<a href="http://google.com">
<input type="image" src="Ky5ME_burned.png" alt="Submit" width="660" height="174">
</a>
</head>
</html>
.btn_button, .btn_button:hover, .btn_button:focus{
background: orange;
color: blue;
margin-left: -10px;
margin-top: 3px;
width: 150px;
outline: none;
}
.round_div{
display: flex;
}
.round2:before{
content: "\25cf";
font-size: 14px;
padding: 0px 3px;
border: 4px solid #000;
border-radius: 50%;
}
.round1{
border: 10px solid orange;
border-radius: 50%;
}
.glyphicon_right_arrow{
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div class="col-xs-12 form-group"></div>
<div class="col-xs-12">
<div class="round_div">
<div class="">
<div class="round">
<div class="round1">
<span class="round2"></span>
</div>
</div>
</div>
<div class="">
<button class="btn btn_button" value="">MORE ABOUT US
<span class="glyphicon glyphicon-chevron-right glyphicon_right_arrow"></span></button>
</div>
</div>
</div>
I have to make an <input> that's larger than the usual. The height must be 55px. I am having trouble vertically aligning the glyph image inside the orange square. It looks like this:
It should look like this:
I have tried using margin-top on my <i> element but it moves the rectangle down too, I need to move just the glyph. It looks like this:
Please let me know if you have any ideas on how I could vertically center the glyph inside the orange box. I have setup a jsfiddle at https://jsfiddle.net/vteL375o/1/
HTML:
<div class="container">
<div class="form-group has-feedback" style="margin-top:20px;">
<input type="text" id="search-query" class="form-control not-rounded search-input">
<i class="glyphicon glyphicon-search form-control-feedback glyph-class" style=""></i>
</div>
</div>
CSS:
.not-rounded {
border-radius: 0;
}
.search-input {
font-size: 20px;
margin-bottom: 50px;
height: 55px;
}
.glyph-class {
height: 55px;
width: 55px;
color:white;
background-color: orange;
font-size: 20px;
}
You can use Flexbox for this, or inline-flex in this case.
.not-rounded {
border-radius: 0;
}
input.search-input {
font-size: 20px;
margin-bottom: 50px;
height: 55px;
}
.glyphicon.glyphicon-search.form-control-feedback.glyph-class {
height: 55px;
width: 55px;
color: white;
background-color: orange;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="form-group has-feedback" style="margin-top:20px;">
<input type="text" id="search-query" class="form-control not-rounded search-input">
<i class="glyphicon glyphicon-search form-control-feedback glyph-class" style=""></i>
</div>
</div>
Add line-height: 55px; to .glyph-class.
input.not-rounded {
border-radius: 0;
}
input.search-input {
font-size: 20px;
margin-bottom: 50px;
height: 55px;
}
i.glyph-class {
height: 55px;
width: 55px;
color: white;
background-color: orange;
font-size: 20px;
line-height: 55px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="form-group has-feedback" style="margin-top:20px;">
<input type="text" id="search-query" class="form-control not-rounded search-input">
<i class="glyphicon glyphicon-search form-control-feedback glyph-class" style=""></i>
</div>
</div>
Just add padding: 10px 0; in to your .glyph-class
like this
.glyph-class {
height: 55px;
width: 55px;
color:white;
background-color: orange;
font-size: 20px;
padding: 10px 0;
}
Here is the running sample: https://jsfiddle.net/vteL375o/6/