So I've got this:
http://i.imgur.com/EkmIEOx.jpg?1
I want the espresso machine to be centered inside the column, not next to the next, not attached to the left, but right in the middle.
This is the code I've got ( for some reason the jsfiddle doesn't work so I'm posting it here just for the code ).
#espresso-machine {
height: auto;
background-color: #C59989;
padding: 68px 0 0;
}
#espresso-machine p {
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 20px;
font-family: 'Indie Flower', cursive;
font-size: 25px;
color: #000;
padding: 10px 50px 0px 0px;
}
#espresso-machine h4 {
color: #000;
font-family: 'Lily Script One', cursive;
font-size: 50px;
margin: 0;
padding-top: 20px;
padding-left: 0;
}
<div id="espresso-machine">
<div class="row row-centered">
<div class="col-xs-6 col-lg-6">
<img src="https://dummyimage.com/300x100/000/fff" class="hvr-grow">
</div>
<div class="col-xs-12 col-sm-6 col-lg-6">
<h4>Espresso machine</h4>
<p>An espresso machine brews coffee by forcing pressurized water near boiling point through a "puck" of ground coffee and a filter in order to produce a thick, concentrated coffee called espresso. The first machine for making espresso was built and patented in 1884 by Angelo Moriondo of Turin, Italy. An improved design was patented in 1901, which was bought by the founder of the "La Pavoni" company which from 1905 produced espresso machines commercially on a small scale in Milan. <br><br>
Multiple machine designs have been created to produce espresso. Several machines share some common elements, such as a grouphead and a portafilter. An espresso machine[1] may also have a steam wand which is used to steam and froth liquids, to include milk, for coffee drinks such as cappuccino and caffe latte. Espresso machines may be steam-driven, piston-driven, pump-driven, or air-pump-driven. Machines may be manual or automatic.</p>
</div>
</div>
</div>
https://jsfiddle.net/jok2c383/
Try like this. updated your fiddle too https://jsfiddle.net/jok2c383/7/
<div class="col-xs-6 col-lg-6">
<div class="col-md-6 col-md-offsset-3">
<img src="img/espresso-cappuccino-machine.png" class="hvr-grow">
</div>
</div>
You may want to use flexbox here fiddle
94% coverage http://caniuse.com/flexbox
.is-centered {
display: flex;
align-items: center;
justify-content: center;
}
Images are inline elements, so if you give the parent element the bootstrap class of "text-centre" you are centering any inline elements. This would include text.
https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
As an alternate option to the text-center class, you could add the class "center-block" to the actual image. This makes the image a block element, and centers it with "margin-left:auto, margin-right:auto". Using center-block also means you can also use "img-responsive" and center the image.
Have a look at the bootstrap helper classes for more information:
http://getbootstrap.com/css/#helper-classes
Try like this https://jsfiddle.net/jok2c383/17/
i just add new div image inside image and add this css:
.image {
width:100%;
text-align: center;
display:flex;
align-items: center;
justify-content: center;
height:100vh;
flex-flow: column;
}
Related
I am a junior developer and I am coding my portfolio. I have a problem which is the following:
I put an animation effect typing on a keyboard on a "p" with JS and it moves a lot of my elements.
I managed to fix some with: "position absolute" and some CSS adjustments but the second problem is that I put a JS library to put a dark mode and "position: absolute" makes that the dark mode does not take disregard color changes.
Here is the HTML5 code:
<section class="landing-page">
<p>Luck, <br> web developer <span id="monSpan">html</span> </p> **<-- animation is here**
<div>
<img src="/img/undraw_developer_activity_re_39tg.svg" alt="">
</div>
</section>
<section class="end-landing-page">
<div>
<button>En savoir plus <span class="material-symbols-outlined">
arrow_downward
</span> </button> **<-----the moving div is here**
</div>
</section>
Here is the CSS3 code:
.landing-page {
display: flex;
font-family: 'Poppins', sans-serif;
font-size: 3em;
font-weight: bold;
}
.landing-page p {
padding-left: 10%;
padding-right: 50%;
font-size: 4rem;
}
.landing-page img {
height: 10em;
padding-left: 20%;
padding-right: 9%;
}
.landing-page div {
position: absolute;
padding-left: 40%;
}
#monSpan {
transition: all 0.5s;
background-color: rgb(129, 129, 255);
}
.end-landing-page div {
padding-top: 10%;
padding-left: 8%;
}
.end-landing-page button {
display: flex;
align-items: center;
background-color: rgb(129, 129, 255);
border-radius: 30px;
padding: 10px;
}
as said before I tried with the "position" property and it works but the dark mode library no longer works on these elements
I also tried with the "z-index" property but without result
I am French and use google translation, and there may be bad translations do not hesitate to ask me to rephrase.
I am creating a unordered list in Bootstrap 3 for my class. I am using a glyphicon as the bullet point. I am having trouble with the last item wrapping in desktop view and as I view it in different breakpoints the items sometimes display inline.
Here is my html
<div class="bg">
<div class="container-fluid text-center" style="height:100%;">
<div class="row content">
<div class="col-sm-2">
</div>
<div class="col-lg-8 text-left">
<h2>EDUCATION</h2>
<hr class="style1">
<h3 class="job">Bachelor of Science, Marketing - San Jose State University</h3>
<h2>CERTIFICATIONS</h2>
<hr class="style1">
<h3 class="job">HubSpot Inbound Certification</h3>
<h4>2016</h4>
<p>The course details the stages of the inbound methodology. Lectures explained various inbound marketing topcis such as how to optimize websites and best practices for a sucessful landing page.</p>
<h3 class="job">Coursera Web Design for Everybody</h3>
<h4>2017</h4>
<ul class="custom-bullet col-lg-4">
<li>Introduction to HTML5</li>
<li>Introduction to CSS3</li>
<li>Interactivity with JavaScript</li>
<li>Advanced Styling with Responsive Design</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-sm-2">
</div>
Here is my css:
.bg {
background-color:#ffffff;
background-size:100%;
width:100%;
height: auto;
padding-top:8%;
margin-bottom:0;
margin-top:3%;
}
.job {
color: #800080;
}
.custom-bullet li {
display: block;
}
.custom-bullet li:before
{
/*Using a Bootstrap glyphicon as the bullet point*/
content: "\e080";
font-family: 'Glyphicons Halflings';
font-size: 9px;
float: left;
margin-top: 4px;
margin-left: -17px;
color: #000000;
}
You are setting float: left; to the ul li, that causes the 'inline' looking behavior.
On larger screen use have container with col-lg-4, so the container is smaller and some items do not fit there and appears on new line.
You can reset this, or adjust the selector, depends on what you want.
.custom-bullet li
display: block;
float: none;
}
The problem is with this class
.custom-bullet li:before
{
/*Using a Bootstrap glyphicon as the bullet point*/
content: "\e080";
font-family: 'Glyphicons Halflings';
font-size: 9px;
float: left; // change to none
margin-top: 4px;
margin-left: -17px;
color: #000000;
}
By the way why did you add this as with CSS pseudo-elements rather than writing in html.
I asked a similar question for iOS NSAttributedString but since it's not possible with that, I am looking for a way to achieve this via HTML, CSS and javascript if needed.
I know CSS has "drop cap" using first-letter. Example: https://codepen.io/tutsplus/pen/GZxjEM
However, I need to do it for entire words and not just first-letter.
In the following picture, notice how "Strength" is the biggest and then "is not something" and "you have, rather" share the same line as "Strength".
NOTE: My problem isn't how to format the first word - it's how to have 2 lines share the first line. Notice how "Strength" is the biggest and then "is not something" and "you have, rather" share the same line as "Strength". How to make them share the same line? Similar to how drop-caps lets you have multiple lines be shared with the first letter.
I need to achieve a similar look with HTML, CSS and JS. If drop cap is not possible for this, is there any other way I can achieve this?
NOTE: Since my text will be variable, I can't use an image/photoshop etc.
EDIT: From suggestions, CSS Flexbox might be able to achieve this. I need to figure out how to place my words in the boxes:
<div>
<div style="float: left; font-size: 4em; background-color:grey;">
STRENGTH
</div>
<div style="float: left; padding-left: 10px; background-color:yellow;">
<div>
<span style="font-size: 2em;">is not</span><span style="font-size: 1em;"> something</span>
</div>
<div>
you have, rather
</div>
</div>
</div>
<div style="clear: both; font-size: 2em;">
something that reveals itself
</div>
<div style="font-size: 4em;">
when you need it.
</div>
<div style="font-size: 1em;">
#myHASHTAG
</div>
Here is a structure you can use, with Flexbox
.inner {
display: flex;
align-items: flex-end;
}
.inner > div:nth-child(1) {
font-size: 60px;
text-transform: uppercase;
}
.inner2 {
padding: 0 0 15px 10px;
}
.inner2 div:nth-child(-n+2) {
display: inline-block;
}
.inner2 > div:nth-child(1) {
font-size: 20px;
text-transform: uppercase;
}
.wrapper > div:nth-child(2) {
font-size: 28px;
text-transform: uppercase;
}
.wrapper > div:nth-child(3) {
font-size: 50px;
text-transform: uppercase;
}
<div class="wrapper">
<div class="inner">
<div>Strength</div>
<div class="inner2">
<div>is not</div>
<div>something</div>
<div>you have, rather</div>
</div>
</div>
<div>something that reveals itself</div>
<div>when you need it</div>
</div>
Try this:
<div>
<div style="float: left; width: 20%;">
Big Text
</div>
<div style="float: left; width: 70%;">
<div>
small text first line
</div>
<div>
small tex second line
</div>
</div>
</div>
<div style="clear: both;">
the rest of the text
</div>
I write an example for you and try to make it like the photo u share, hope it can be usefull for you :
HTML :
<span class="bigText">Strength </span>
<span class="mediumText">is not
<span class="smallText">something </span>
</span>
<span class="subLine">you have, rather</span>
css :
.bigText{
font-size:80px;
text-transform: uppercase;// use capitalize for make first word uppercase
}
.mediumText{
font-size:30px;
text-transform: uppercase;
position: absolute;
top:35px
}
.smallText{
font-size:20px;
}
.subLine{
font-size:20px;
}
https://jsfiddle.net/emilvr/6o2fpf9t/1/
So I've got this simple setup of images and divs. On click of the div, the website should scroll down to another div. Everything seems alright but for some reason, it doesn't work. I've attached a jsfiddle to the bottom of the code.
Here's the code:
<div class="block-2">
<h4>Choose your coffee!</h4>
<div class="row row-centered">
<div class="col-xs-12 col-md-4 col-centered" >
<div class="scrollcezve">
<img src="img/cezve-2.png" class="hvr-grow img-round">
</div>
</div>
<div class="col-xs-12 col-md-4 col-centered" >
<img src="img/coffee-pot-heart.png" class="hvr-grow img-round" >
</div>
<div class="col-xs-12 col-md-4 col-centered">
<img src="img/espresso-cappuccino-machine.png" class="hvr-grow img-round" >
</div>
</div>
</div>
<div id="cezve">
<div class="row row-centered">
<div class="col-xs-6 col-lg-6" >
<img src="img/cezve.png">
</div>
<div class="col-xs-12 col-sm-6 col-lg-6" >
<h4>Cezve</h4>
<p>A cezve is a pot designed specifically to make Turkish coffee. The body and handle are traditionally made of brass or copper, occasionally also silver or gold. Though, recently, cezveler are also made from stainless steel, aluminium, or ceramics. The long handle is particularly useful to avoid burning one's hands, and the brim is designed to serve the coffee. <br>
The name cezve is of Turkish origin, where it is a borrowing from Arabic: جذوة "ember".
Other regional variations of the word cezve are jezve and čezve. In Ukrainian and Russian, the word is spelled джезва (where it exists alongside турка, IPA: [ˈturkə]). In Bosnia and Herzegovina, Serbia, Croatia, Slovenia and Czech Republic it is a long-necked coffee pot, spelled "džezva".</p>
</div>
</div>
.block-2 {
height: auto;
background-color: #795548;
text-align: center;
}
.block-2 img {
height: 250px;
width: 250px;
padding: 20px;
}
.block-2 h4 {
color: #fff;
font-family: 'Lily Script One', cursive;
font-size: 30px;
margin: 0;
padding: 10px 10px;
text-align: center;
}
#cezve {
height: auto;
background-color: #C59989;
}
#cezve img {
padding: 20px 20px;
height: 400px;
width: 550px;
}
#cezve p {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 20px;
padding: 10px 50px 0px 0px;
}
#cezve h4 {
color: #fff;
font-family: 'Lily Script One', cursive;
font-size: 50px;
margin: 0;
padding-top: 20px;
}
$(".scrollcezve").click(function() {
$('html, body').animate({
scrollTop: $("#cezve").offset().top
}, 2000);
});
https://jsfiddle.net/qpr0vd4y/1/
By clicking on the div scrollcezve ( or the image cezve-2png ) it should scroll down to #cezve, but it isn't working.
Be sure you are including jQuery in the <head> of your document. The fiddle you provided had it included in the HTML window. If you move it into the external resources section, everything works.
I'm using ContentFlow JS library and I have a problem in IE (8 and 9, older versions I don't plan to support). ContentFlow's scripts can't adjust font size in the carousel.
In Chrome, FireFox, Safari, Safari (iOS) everything works fine.
Can anyone suggest reasons for such behavior in IE?
Chrome:
Internet Explorer:
Some code as requested:
Carousel element code:
<div class="item" id="backstage1">
<div class="content">
<div class="video-title">Конференции</div>
<div class="video-event">
<strong>Microsoft TechEd</strong>
</div>
<img id="banner1" class="ibanner bordered" src="img/video/c1.jpg" alt="" title="" />
<img class="shadow" src="img/flow-item-shadow.png" alt="" title="" />
</div>
<div class="caption">Some description text</div>
</div>
CSS for element:
.video-title {
font-family: "FSAlbertPro", "Arial", serif;
font-size: 3.4em;
font-weight: bold;
color: white;
text-transform: uppercase;
text-align: center;
line-height: 0.9em;
margin-top: 17px;
margin-left: -6px;
margin-bottom: -8px;
position: relative;
}
.video-event {
position: relative;
top: 28px;
left: 15px;
font-family: "FSAlbertPro", "Arial", serif;
font-size: 1.3em;
font-weight: 100;
color: #4d4d4d;
line-height: 100%;
}
Other "magic" is done by ContentFlow.
p.s. trying to make a jsFiddle to recreate the problem... will update.
Your font sizes are in em. I think, IE uses bigger font than firefox or chrome by default. Try to specify font size in px to body, and take attention for headings!