On desktop, my button looks great. When I go to mobile version, the button goes outside of the screen width like below:
1) How do I keep this from happened based on my bootply and code below
2) How do I add a top margin to the button too.
Here's my bootply:
http://www.bootply.com/KChuJgr967
Here's my html:
.content-section-d {
padding: 50px 0 0 0;
}
.centered-text {
text-align: center
}
/* Buttons */
.btn,
.btn:link,
.btn:visited {
font-family: 'Lato', sans-serif;
font-weight: 700;
padding: 15px 40px;
background-color: #db4632;
font-size: 20px;
letter-spacing: 0;
text-transform: uppercase;
border-color: #db4632;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)
}
.btn:active,
.btn:hover {
background-color: #db4632;
}
<div class="content-section-d">
<div class="container">
<div class="row centered-text">
<div class="col-md-4 col-xs-12">
<h3>4,000,000+</h3>
</div>
<div class="col-md-4 col-xs-12">
<h3>1,500,000+</h3>
</div>
<div class="col-md-4 col-xs-12">
<h3>150,000+</h3>
</div>
</div>
<div class="row centered-text">
<div class="col-md-4 col-xs-12">
<h3>68,000+</h3>
</div>
<div class="col-md-4 col-xs-12">
<h3>2,000+</h3>
</div>
<div class="col-md-4 col-xs-12">
<h3>3 years</h3>
</div>
</div>
<div class="col-lg-12 text-center">
Register for a Free Account
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-d -->
So, as I noted in comments you need to use #media.
Here, a code for your button, which your should add to stylesheets.
#media(max-width: 1200px) {
.btn span {
display: block;
max-width: 200px;
white-space: normal;
}
}
Also, don't forget about add <span> to your button. Now button code is:
<button href="https://www.apple.com" target="_blank" class="btn btn-primary btn-lg"><span>Register for a Free Account</span></button>
And here is full working example on JSFiddle.
P.S. Change max-width in #media to your property.
You can use vw and vh CSS rules to change the size of text according to the screen size. In your case if you add this:
font-size:3vw;
font-size:1.8vh;
It works pretty well. (Play with values to get exactly what you need)
Related
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.
So I uploaded a question that's the same as this one, however, that got very overcrowded so I am putting up the question again in hopes of explaining my problem a bit better.
I am currently making my own website using HTML, CSS, and JavaScript with bootstrap alongside. While trying to make the site mobile friendly, I have noticed an error with how 3 of the buttons are being displayed on the screen. Basically, what I want to happen is for the three buttons to be stacked on top of each other with a gap in between each one when the web page is viewed on mobile. However, the buttons aren't displaying correctly. See the first image.
One thing that I will say, though, is that I am using the feature (not sure if it's only in Google Chrome) that when you click inspect element, you can select an option that allows you to view what the web page will look like on a mobile screen. What I'm getting at, is that I don't know if it's the code that's wrong or if Google Chrome's feature doesn't work that well.
If you do have any suggestions for applications I could use to view the HTML file on a mobile device, please let me know.
PLEASE NOTE. I HAVE ONLY GIVEN THE CODE FOR ONE OF THE BUTTONS AS THE OTHER TWO ARE BASICALLY THE SAME
#media (max-width: 767px){
.btn-block-xs {
display: block;
width: 100%;
margin-bottom: 10px;
}
}
#cheapestOption {
font-family: 'Pavanam', sans-serif;
background-color: rgba(255,255,255,0.3);
border: none;
}
#cheapestOption a {
text-decoration: none;
color: white;
}
#cheapestOption p {
font-family: 'Pavanam', sans-serif;
font-size: 50px;
}
#cheapestOption ul{
text-align: left;
font-size: 17px;
}
#cheapestOption:hover {
background-color: rgba(255, 255, 255, 0.6);
text-decoration: none;
}
<div class="container-fluid" id="grad"> <!-- Pricing Buttons -->
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4">
<button type="button" id="cheapestOption" class="btn btn-block-xs" aria-label="center Align">
<a href="pricing.html" target="_blank">
<h4>Text</h4>
<p><strong>£££</strong><span>/ £5 a month</span></p>
<ul>
<li> Text </li>
<li> Text </li>
<li> Text </li>
<li> Text </li>
</ul>
</a>
</button>
</div>
(First picture shows what it looks like on mobile) (this is what needs fixing)
(Second picture shows what it looks like on desktop) (this is fine)
You html and css are not really following the bootstrap documentation. I suggest you read more on how bootstrap works. You can simplify a lot of what you are doing and probably make things look a lot better too.
I would suggest create a button which is a link and move the text out of it. To answer your question exactly please see this jsfiddle.
I moved your html to be in the correct col class Let me know if you have anymore questions,
html
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4"><button type="button" id="cheapestOption" class="btn btn-block-xs" aria-label="center Align">
<a href="pricing.html" target="_blank">
<h4>Text</h4>
<p><strong>£££</strong><span>/ £££ a month</span></p>
<ul>
<li> Text </li>
<li> Text </li>
<li> Text </li>
<li> Text </li>
</ul>
</a>
</button></div>
<div class="col-md-4 col-sm-4 col-xs-4"> <button type="button" id="averageOption" class="btn btn-block-xs" aria-label="center Align">
<a href="pricing.html" target="_blank">
<h4>Text</h4>
<p><strong>£££</strong><span>/ £££ a month</span></p>
<ul>
<li> Text </li>
<li> Text </li>
<li> Text </li>
<li> Text </li>
</ul>
</a>
</button></div>
<div class="col-md-4 col-sm-4 col-xs-4"> <button type="button" id="expensiveOption" class="btn btn-block-xs" aria-label="center Align" disabled>
<h4>Text</h4>
<p><strong>£££</strong><span>/ £££ a month</span></p>
<p id="tempBottom"><strong>Coming Soon</strong></p>
</button></div>
</div>
</div>
CSS
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
#cheapestOption {
font-family: 'Pavanam', sans-serif;
background-color: red;
border: none;
}
#cheapestOption a {
text-decoration: none;
color: white;
}
#cheapestOption p {
font-family: 'Pavanam', sans-serif;
font-size: 1em;
}
#cheapestOption ul {
text-align: left;
font-size: 17px;
}
#cheapestOption:hover {
background-color: rgba(255, 255, 255, 0.6);
text-decoration: none;
}
#averageOption {
font-family: 'Pavanam', sans-serif;
width: 100%;
background-color: red;
border: none;
color: white;
}
#averageOption a {
text-decoration: none;
color: white;
}
#averageOption p {
font-family: 'Pavanam', sans-serif;
font-size: 1em;
}
#averageOption ul {
text-align: left;
font-size: 17px;
}
#averageOption:hover {
background-color: rgba(255, 255, 255, 0.6);
}
#expensiveOption {
font-family: 'Pavanam', sans-serif;
width: 100%;
background-color: red;
border: none;
color: white;
}
#expensiveOption a {
text-decoration: none;
color: white;
}
#expensiveOption p {
font-family: 'Pavanam', sans-serif;
font-size: 1em;
}
#expensiveOption ul {
text-align: left;
font-size: 1em;
}
To simplify this for you here are a few things to remember,
Bootstrap is built for mobile first.
Each row consist of 12 pieces, so when you tell it col-md-4 you are saying that when the browser is the width of col-md you want that space to take up 1/3 of the width of the row.
You can target each browser size by default css built into bootstrap using col-xs col-sm -col-md etc... To see the default size of each col-size check the documentation or inspect element and check the class in the DOM.
Bootstrap Grid System
If you want the col-size to stack at certain screen widths this is what you can do.
If when the screen is sm you want them to stack you could do,
<div class="row">
<div class="col-sm-12">
<p>My text here will be on this row alone.</p>
</div>
<div class="col-sm-12">
<p>My text here will be on this row alone.</p>
</div>
<div class="col-sm-12">
<p>My text here will be on this row alone.</p>
</div>
</div> <!-- end of row -->
This will stack on sm size because when the screen is the width of the sm size it will take up 12 which is the whole space. So that media query will fire off and the col will now take up the whole row.
Remeber you can stack each class as well. So if you want to make sure each col stack starting with md you could do this,
<div class="col-xs-12 col-sm-12 col-md-12 ">
Now when the browser is at each of those class target widths whatever html is in that div will take up the whole row.
How can I have bootstrap bordered columns with margin?
I have:
<div class="col-sm-12 col-lg-6">
<div class="drag-block" id="addressField_1" ondragover="return dragOver(event)" draggable="true" ondragend="return dragEnd(event)" ondragstart="return dragStart(event)">
.....................
</div>
</div>
JSFiddle
But I want
<div class="col-sm-12 col-lg-6 drag-block" id="addressField_1" ondragover="return dragOver(event)" draggable="true" ondragend="return dragEnd(event)" ondragstart="return dragStart(event)">
.....................
</div>
JSFiddle
and to look like the first one.
Just change the css to the following :
.drag-block{
border: 2px dashed #bbb7b7;
margin: 0px 15px 30px 15px;
padding: 10px 15px 15px 15px;
cursor: move;
}
I am having a little issue here. When I reduced my screen, the color "Grey" runs into my white div below it for some reason. The div above it is my jumbotron, so I'm not sure why this is happening.
My website is below for you to check out and see what happens when you reduce it on a computer.
hustlebussellunlimited.com
Here is some of my CSS code below, please tell me if you need more.
.jumbotron{
background: linear-gradient(
rgba(0, 0, 0, 0.1),
rgba(0, 0, 0, 0.2)
), url(main-banner.jpg);
background-size: cover;
color: #ffffff;
padding: 0;
}
.jumbotron .intro{
background: rgba(0, 0, 0,0.1);
padding-top: 120px;
padding-bottom: 40px;
min-height: 400px;
}
.jumbotron .intro .row-top div.ccont{
}
.row-bottom{
margin-top: 20px;
margin-bottom: 20px;
}
.jumbotron div.ccont{
background: #fff;
min-height: 150px;
}
.jumbotron .row-top div.ccont{
-webkit-box-shadow: 0px 1px 2px rgba(100, 100, 100, 0.75);
-moz-box-shadow: 0px 1px 2px rgba(100, 100, 100, 0.75);
box-shadow: 0px 1px 2px rgba(100, 100, 100, 0.75);
}
.jumbotron .row-bottom div.ccont{
-webkit-box-shadow: -1px -1px 2px rgba(100, 100, 100, 0.75);
-moz-box-shadow: -1px -1px 2px rgba(100, 100, 100, 0.75);
box-shadow: -1px -1px 2px rgba(100, 100, 100, 0.75);
}
.jumbotron p{
padding: 20px 0;
}
.jumbotron .media{
margin: 50px 0;
}
.jumbotron .media-body h1{
margin-top: 100px;
}
section.slider{
color: #ffffff;
background: #696969;
margin: 40px 0;
padding: 40px 0;
}
section.slider h2{
margin-bottom: 20px;
}
section.slider .col-md-8{
padding-left: 30px;
}
Here is my HTML code
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron" id="home">
<div class="intro">
<div class="container">
<div class="row">
<h1 class="text-center"><span style="font-size:1.9em;">W</span>eb<span style="font-size:1.9em;">I</span>nsight</h1>
<p class="text-center">A Subsidiary of HustleBussell</p><br/>
</div>
<div class="row triangles">
<div class="up-triangle animated fadeInUp">
<div class="info">
Search Engine Optimization
</div>
</div>
<div class="down-triangle animated fadeInDown">
<div class="info">
Web Development<br/>
</div>
</div>
<div class="up-triangle animated fadeInUp">
<div class="info">
Marketing
</div>
</div>
<div class="down-triangle animated fadeInDown">
<div class="info">
Systems Security<br/>
</div>
</div>
<div class="down-triangle animated fadeInDown visible-sm">
<div class="info">
Mobile App Development<br/>
</div>
</div>
<div class="up-triangle animated fadeInUp">
<div class="info">
Consulting
</div>
</div>
<div class="down-triangle animated fadeInDown">
<div class="info">
Branding<br/>
</div>
</div>
<div class="up-triangle animated fadeInUp">
<div class="info">
Growth Hacking
</div>
</div>
</div>
</div>
</div>
</div>
<section id="services">
<div class="container">
<!-- Example row of columns -->
<div class="row features inner-page">
<div class="col-md-12 text-center">
<h2>Amplify your Reach, Achieve Massive Results</h2>
<p style="font-size:20px;">Many people believe they can build their brand and attract new clients by being active online only and engaging in marketing practices. This is only
partially true. In order to take your brand to the next level, you have to start with unrealistic thinking. Unrealistic meaning that we execute beyond what most people believe is possible. This thinking involves the client being at the starting point of it all. Ground Zero. This is what we call "Client Zero Thinking". WebInsight
takes you to the next level by engaging in "BackYard Marketing", generating sales leads and boosting revenue utilizing overlooked resources.</p>
</div>
</div>
</div>
</section>
<section class="slider" id="features">
<div class="container">
<div class="inner-page">
<h2 class="text-center">About Us</h2>
<p style="font-size:20px;" class="text-center">WebInsight is a creative marketing and technology company based in Chicago, Illinois. Our mission statement "Provide so much value
that the cost paid for our services is nothing compared to the benefit" is what we live by. We honor our clients and therefore we provide the best solutions
and services for your problems. Whether you're a company just starting or an already established business, we offer results oriented solutions to help you become a market leader.</p>
</div>
</div>
</div>
</section>
in the fiddle i couldn't simulate the problem but i entered and inspected your website. the problem is that the element that has that grey background , respectively .jumbotron .intro , contains the triangles.
when you resize the window, the triangles go on two rows and so the height of the .info becomes bigger and overlaps the next element ( white one ).
you've hidden the triangles with visibility:hidden here (max-width: 1152px) , visibility:hidden only hides the elements but they still occupy space. you should use display:none so the elements are hidden and they don't occupy space
code :
#media (max-width: 1152px)
.up-triangle, .down-triangle {
/* visibility: hidden; */
display: none!important;
}
added the !important because you also have in your css this : .visible-sm { display: block !important;} and it's overwriting the code. i suggest you don't use !important only if you really have to.
to read more info about the difference between visibility and display see here what-is-the-difference-between-visibilityhidden-and-displaynone
I have a button created in a bootstrap project but I can't change the text color when I click the button. In visited state, when the pointer is not in the button, the text changes to blue and I want to stay in white. I think the problem is with the bootstrap css file but I don´t know how to solve that problem
here's the fiddle:
https://jsfiddle.net/pfrutuoso/Ljr8t8pz/
My html:
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="form-group">
<label>CPF</label>
<input type="text" class="form-control">
<!-- <label class="form-error">Mensagem erro campo</label> -->
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
<div class="form-group">
<button class="btn btn-validarForm" type="button">Validar CPF</button>
</div>
</div>
</div>
and css:
.btn-validarForm{
font-family: 'Aleo Bold';
background-color: #8C0000;
color: #fff;
text-transform: uppercase;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
border-radius: 2px;
border-top: 1px solid #D90000;
border-bottom: 1px solid #8C0000;
width:100%;
font-size:14px;
height:40px;
margin-top:23px;
border:none;
}
.btn-validarForm:hover,
.btn-validarForm:active,
.btn-validarForm:visited{
background-color: #B20000;
color: #fff;
}
Bootstrap also defines :focus state styles, override this in your CSS:
.btn-validarForm:hover,
.btn-validarForm:active,
.btn-validarForm:visited,
.btn-validarForm:focus{
background-color: #B20000;
color: #fff;
}
JSFiddle
Side-note: Most browsers come with the functionality within developer tools to trace the CSS styles for yourself. Chrome (not sure about other browsers) even let's you toggle the pseudo states and view the styles that will be applied for each state: