Currently working on a weather app using bootstrap, and within one row I have two columns: one side shows the temperature, which can be toggled between C and F, and the other shows other basic weather information (right now I just have a basic weather description). But when I toggle the temperature between C and F, the differences in width of those two letters appears to push the weather info slightly to the left or right.
I've tried applying position:absolute/relative and floats to both elements, but can't seem to fix the problem. Any help would be appreciated!
All my code is in Codepen: https://codepen.io/alissaw/pen/pppzwd but here is the element-specific code isolated (#weatherdata is the element that's shifting):
<body>
<div>
<h1 id = "location">
</h1>
</div>
<div class="loader"></div>
<div class="container">
<div class="row">
<div class="col-md-6">
<label class="switch">
<input type="checkbox">
<div class="slider">
</div>
<div class="text"></div>
</label>
<p id="temp"></p>
</div>
<div class="col-md-6">
<h2 id="weatherData">
</h2>
</div>
</div>
</div>
--- CSS ---
body{
background-color: #4FCCFF;
text-align: center;
background-repeat: no-repeat;
background-size: cover;
}
.container{
background-color: rgba(0,0,0,0.1);
width: 70%;
margin: auto;
overflow:hidden;
}
#location{
text-align: center;
font-size: 60px;
color: white;
font-family: Raleway;
font-weight: 200;
}
#temp{
font-size: 100px;
font-family: Raleway;
font-weight: 250;
float: left;
color: white;
}
#weatherData{
font-size: 40px;
color: white;
font-family: Raleway;
font-weight: 200;
margin-top: 5%;
display: inline-block;
position: absolute;
}
So in your codepen I noticed that you used bootstrap classes but did not add in the bootstrap CSS file. I added the CSS file in and it seemed to work just fine without the shifting.
From the settings try adding in the bootstrap file:
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/css/bootstrap.css
Related
I am trying to create a 3 column layout for a website design that contains an image at the top of each column followed by a h3 then some text. I have done this in the html but when I get to the CSS there are padding/margin coming from somewhere even when I set them both to 0.
Also for some reason the columns aren't aligned vertically correctly?
HTML:
<h3>Why You Should Choose Us For Financing Options.</h3>
<div class="card">
<img src="Heart.png" alt="Heart">
<h5>Lowest Industry Rates</h5>
<p>We take pride in our rates being the lowest in the industry!</p>
</div>
<div class="card">
<img src="Coin.png" alt="Coin">
<h5>Our Funding Is Fast</h5>
<p>After completing our form, you can expect to receive your funding within 48 hours!</p>
</div>
<div class="card">
<img src="File.png" alt="File">
<h5>We're Quick And Easy</h5>
<p>The form is easy to understand and can be completed in minutes!</p>
</div>
CSS:
header h3 {
font-family: 'Montserrat Light', sans-serif;
font-size: 25px;
color: #FFF;
margin-top: 60px;
}
.card {
display: inline-block;
width: 260px;
margin: 0;
padding: 0;
vertical-align: middle;
margin-top: 60px;
}
Image of desired outcome: https://i.gyazo.com/f4a2ef3a9680a1ee79eaafd889d368b7.png
Current outcome:
https://i.gyazo.com/fd2eafc6a980527a07811e409a9262bd.png
How about try this:
HTML:
<h3>Why You Should Choose Us For Financing Options.</h3>
<div id="fc">
<div class="card">
<img src="Heart.png" alt="Heart">
<h5>Lowest Industry Rates</h5>
<p>We take pride in our rates being the lowest in the industry!</p>
</div>
<div class="card">
<img src="Coin.png" alt="Coin">
<h5>Our Funding Is Fast</h5>
<p>After completing our form, you can expect to receive your funding within 48 hours!</p>
</div>
<div class="card">
<img src="File.png" alt="File">
<h5>We're Quick And Easy</h5>
<p>The form is easy to understand and can be completed in minutes!</p>
</div>
</div>
CSS:
header h3 {
font-family: 'Montserrat Light', sans-serif;
font-size: 25px;
color: #FFF;
margin-top: 60px;
}
#fc {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
.card {
display: inline-block;
min-width: 260px;
margin: 0;
padding: 0;
vertical-align: middle;
margin-top: 60px;
}
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.
I am trying to display a text on one line , with a small part of the text in different style.
Here is my code -
<style>
#footer {
color: black;
text-align: center;
padding: 5px;
font-size: 16px;
font-family:Calibri;
display-block:inline;
}
</style>
<div id="footer">Questions? Contact us
<div id="email" style="color:blue; text-algin:center;display-block:inline;">abc#xyz.com</div>
Thank you
</div>
The desired output is
Questions ? Contact us abc#xyz.com Thank you
But the output is shown below.
<style>
#footer {
color: black;
text-align: center;
padding: 5px;
font-size: 16px;
font-family: Calibri;
display-block: inline;
}
</style>
<div id="footer">Questions? Contact us
<div id="email" style="color:blue; text-algin:center;display-block:inline;">abc#xyz.com</div>
Thank you
</div>
How can I get the text in one line with a part of the line being in different style
Change the inner div to span
<style>
#footer {
color: black;
text-align: center;
padding: 5px;
font-size: 16px;
font-family: Calibri;
display-block: inline;
}
</style>
<div id="footer">Questions? Contact us
<span id="email" style="color:blue; text-algin:center;">abc#xyz.com</span>
Thank you
</div>
Try adding display:inline-block to email.
#footer {
color: black;
text-align: center;
padding: 5px;
font-size: 16px;
font-family: Calibri;
/* display-block: inline; */
}
#email {
display: inline-block;
}
<div id="footer">Questions? Contact us
<div id="email" style="color:blue; text-algin:center;display-block:inline;">abc#xyz.com</div>
Thank you
</div>
BTW, display-block: inline; is not valid CSS property.
Use "display: inline-block" instead of "display-block: inline"
Don't use divs if you want inline elements. Also display-block property doesn't exist in css. Try using <p> elements to wrap the whole text inside your footer and <span> to change the color like this:
<div id="footer">
<p>Black Text <span style="color: blue;"> Blue Text </span> Black Text</p>
</div>
Actual webpage
I'm trying to display code snippets on my webpage. I'm a CSS novice and having trouble creating a dark background on which to display my code snippets.
When I create a class called "test" (which should override all other background specifications, right?) and assign it a color property of blue and a background property of black, the color blue shows up within pre tags but the background remains the default color.
When I switch to span tags and assign the class there instead, both properties work as I command. But I don't want to use span because my instructors say non-semantic tags are bad practice. Something tells me that there's some inherent property of pre tags that I need to override somehow.
Any ideas? I can post the code here if that's proper/necessary.
Edit: I posted an abbreviated version of the code here. I tested it, and got the same issue here. Hopefully with less code it will be easier to pinpoint the problem.
Here's the HTMl:
<!DOCTYPE html>
<head>
<title>Test</title>
<link type="text/css" rel="stylesheet" href="stylesheets/test.css">
</head>
<body>
<p>
<pre class="test">test</pre>
</p>
</body>
</html>
Now the CSS:
.test {
color: blue;
font-weight: bold;
background: black;
}
pre {
font-family: monospace;
font-size: 1.25em;
text-align: left;
line-height: 0px;
background: black;
}
The more specific the rule, the more likely it will be to override a parent class or id. Give this one a shot...
.snippets div{
background-color: #F00;
}
.snippets div.no_code{
background-color: #000;
}
<div class="snippets">
<div> </div>
<div> </div>
<div> </div>
<div class="no_code"> </div>
<div> </div>
<div> </div>
</div>
have you tried with background-color property of pre tag?
Please check my codepen link. http://codepen.io/anon/pen/gaydao
HTML:
<body>
<p>
<pre>test</pre>
</p>
</body>
CSS:
.test {
color: red;
font-weight: bold;
background: black;
}
pre {
font-family: monospace;
font-size: 1.25em;
text-align: left;
line-height: 0px;
border: 1px solid #000;
height: 50px;
background-color:#DDFFDD;
padding: 10px 0 0 10px;
}
you have to use !important on your class because it's already defined the color property in another class...
.code{
background-color: #000 !important;
}
.box{
width: 250px;
height: 20xp;
background-color: red;
display: inline-block;
margin: 5px;
}
.code{
background-color: #000 !important;
}
<div class="box code"> </div>
<div class="box code"> </div>
<div class="box code"> </div>
<div class="box no_code"> </div>
<div class="box code"> </div>
<div class="box no_code"> </div>
<div class="box no_code"> </div>
the heading and sub heading of a slider is not center aligned its working fine all on other screen sizes but in this screen size the heading and subheading floats to the left
#media screen and (min-width:992px) and (max-width:1199px) {
.position{
position: absolute;
padding-top: 240px;
}
.swiper-slide{
text-transform: uppercase;
letter-spacing: 3px;
font-size: 60px;
line-height: 79px!important;
color: #fff;
}
.subtitle{
font-family: 'Rouge Script', cursive;
font-size: 40px;
line-height: 39px!important;
font-weight: 400;
color: #fff;
font-style: italic;
}
}
i'm using text-center bootstrap class for aligning the text
My HTML
<div class="item text-center">
<div class="position col-lg-12">
<h1 class="swiper-slide">
<strong>
welcome to the shop
</strong>
</h1>
<p class="subtitle">
<span>
Take your time looking around & don't be shy
</span>
</p>
<p class="top-space">
<button type="button" class="btn btn-default btn-lg button hvr-float-shadow" id="focus">
START BROWSING
</button>
</p>
</div>
<img src="img/front_girl1.jpg">
</div>
Use text-align:center; will align text in center .
check below code
.swiper-slide{
text-align: center;
}
.subtitle{
text-align: center;
}
this is cause the issue :
.position{
position: absolute;
padding-top: 240px;
}
remove absolute position and it will work properly
LIVE DEMO
It should work regardless of the positioning context. You should check specificity and display type(if element set to display:inline than text align will not apply directly to that element). Hard to say without live demo. Can you provide more code or a complete fiddle ?