I'm relatively new to coding so bare with me. I want to create a simple timeline like the image I've included
https://imgur.com/a/4upikgR
I'm having trouble understanding col-md, how does it work? how can I obtain result like that?
Here's some of code I wrote, can I block the circle in center of page?
I've spent two days on it and can't make it work.
.img {
width: 150px;
height: 150px;
border-radius: 50%;
border: rgb(235, 234, 234) solid 7px;
align-items: center;
display: block;
margin-left: auto;
margin-right: auto;
}
.tml-title {
border: 2px blue solid;
font-weight: bold;
max-width: fit-content;
text-align: right;
}
.tml-text {
text-align: left font-size: 15px;
max-width: 200px;
color: grey;
}
<div id="bruh">
<div class='row'>
<div class="col-xs-8">
<h3 class="tml-title">Marzo 2021 <br> Nasce un'idea</h3>
</div>
<div class="col-xs-4">
<img class="img" src="https://images.app.goo.gl/nSM1SCypuwV9g2zc6" alt="">
</div>
From your code snippet, I assumed you are using Bootstrap as your CSS framework, so I am going to write this answer based on that assumption.
col-md, col-xs etc are classes to control Bootstrap's grid behaviour on different widths. col-xs-5 means 5 units on sm-and-up, meaning it will take 5 (of 12) units wide (5/12) on a typical small device width (> 768 pixels). Likewise col-md-5 means 5 units on md-and-up, etc.
Your CSS doesnt work because you placed the img in the col-xs-4, while technically you would like to put it on the center of the page. Bootstrap has 12 grids, so right now you placed it like this:
--------------------------------------------
| text | image |
--------------------------------------------
while from what I see, you would like it to be like this:
--------------------------------------------
| text | image | text |
---------------------------------------------
The solution is to split the grid into 3 columns of the same size, or 3 columns of different sizes. Since the max grid in one row is 12, you can choose either 4-4-4 or 5-2-5. I personally would recommend 5-2-5 since the image doesnt look like it will take a lot of space, but that's your choice.
<div class ="row">
<div class="col-xs-5">
<!-- your text here, align the text to the right -->
</div>
<div class="col-xs-2">
<!-- your image here, center it -->
</div>
<div class="col-xs-5">
<!-- your text here, align the text to the left -->
</div>
</div>
And that's it.
References:
What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap? -> for more info
https://medium.com/wdstack/how-the-bootstrap-grid-really-works-471d7a089cfc -> to understand how bootstrap grid works.
You can use from position absolute and then scaling for that to be place in the center of page(for any element):
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
.img {
width: 150px;
height: 150px;
border-radius: 50%;
border: rgb(235, 234, 234) solid 7px;
align-items: center;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.tml-title {
border: 2px blue solid;
font-weight: bold;
max-width: fit-content;
text-align: right;
}
.tml-text {
text-align: left font-size: 15px;
max-width: 200px;
color: grey;
}
<div id="bruh">
<div class='row'>
<div class="col-xs-8">
<h3 class="tml-title">Marzo 2021 <br> Nasce un'idea</h3>
</div>
<div class="col-xs-4">
<img class="img" src="https://images.app.goo.gl/nSM1SCypuwV9g2zc6" alt="">
</div>
Related
I am working on the list of artists page of my lyrics website (a side project of mine). Here is what I currently have:
Notice how some artist names are long and so wrap onto two lines, and pushing my artist name block (the black background) up.
CODE
Here is the HTML markup:
<div class="row artists">
<div class="col-md-2 col-6">
<div class="artist-card">
<div class="artist-image">
<img src="http://placehold.it/200x200" alt="Rihanna" />
</div>
<div class="artist-info">
<div class="artist-name">
<h2>Rihanna</h2>
</div>
</div>
</div>
</div><!-- .artist-card -->
<!-- more artist cards go here -->
</div><!-- .artists -->
And here is the Sass styles:
$artist-card-background-color: #bdbbb0;
.artist-card {
position: relative;
background-color: $artist-card-background-color;
border: none;
border-radius: 2px;
margin-bottom: 15px;
cursor: pointer;
.artist-image {
img {
width: 100%;
}
}
.artist-info {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.8);
.artist-name {
h2 {
margin: 0;
color: #fff;
padding: 10px 15px;
}
}
}
}
I have also created a Codepen to allow you guys to experiment with the cards and how they currently behave across various viewports.
Question
What is the cleanest way I can make the titles legible (readable), but also have the same height no matter what the viewport size is?
Alternative 1
Truncate the text if it exceeds the width.
Add this css to the H2:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
Alternative 2
Use something like http://fittextjs.com/ or http://simplefocus.com/flowtype to change the font-size dynamically based on its length.
Alternative 3
Combine the 2 above, truncate the text only when the text gets to small to read.
I have four divs laid out in a sequential order. I want each to take a corner of the page provided the content will fit, otherwise arrange sequentially vertically.
#pptopleft,
#pptopright,
#ppbottomleft,
#ppbottomright {
text-align: center;
border: 1px solid black;
width: 50%;
}
#ppcontainer {
border: 1px solid black;
font-size: 120%;
min-height: 250px;
margin-top: 20px;
margin-left: 50px;
margin-right: 50px;
padding-left: 3px;
padding-right: 3px;
padding-top: 3px;
padding-bottom: 3px;
overflow: auto;
}
<div id="ppcontainer">
<div id="pptopleft">#1</div>
<div id="pptopright">#2</div>
<div id="ppbottomleft">#3</div>
<div id="ppbottomright">#4</div>
</div>
If they can fit, I'd like them to each take 50% width of the parent container, but if they need to be stacked vertically, each should take 100% width. Something like the below:
//contents of each div will fit without wrapping
1 2
3 4
//contents of each div will not fit without wrapping
1
2
3
4
The latter maybe for smaller resolutions or mobile devices.
What can I do to achieve this using CSS?
Media queries could help with this. For example, add the following after your current CSS:
#media all and (max-width: 500px) {
#pptopleft,
#pptopright,
#ppbottomleft,
#ppbottomright {
width: 100%;
}
}
Change the 500px to match whatever breakpoint you want, and set your existing divs to float: left.
Use Bootstrap: and structure your div as following
<div class="container-fluid">
<div class="row">
<div id="1" class="col-md-6"></div>
<div id="2" class="col-md-6"></div>
</div>
<div class="row">
<div id="3" class="col-md-6"></div>
<div id="4" class="col-md-6"></div>
</div>
</div>
I wrote a form as shown here.
CSS is:
#mainContainer {
width: 1000px;
margin: 0px auto;
overflow: hidden;
}
.form {
padding-left: 0%;
height: 123px;
min-height: 520px;
min-width: 350px;
width: 34%;
background: #166bb3;
}
#formDiv {
margin: 5%;
}
#username, #selectCou {
width: -moz-available;
height: 36px;
}
#dob {
height: 36px;
}
#selectGen {
height: 36px;
width: 149px;
}
You can see that Or is coming below the form. I want it to appear beside Fill your information here. How can I do it?
For more clarity, here is the screen shot:
try this:
<div class="row">
<div class="col-md-6">
<h4>Fill your information here</h4>
//put your form here
</div>
<div class="col-md-6">
<h4>Or</h4>
//your Or content here
</div>
</div>
If you want to use Bootstrap columns you should stick to the implemented Grid system classes (you can find the doc here ).
This grid system splits a row into 12 hypotetical columns that you can enlarge as you want, bearing in mind that the maximum width is 12. You can have 12 columns with width 1/12 or 2 columns with width 6/12 or any combination of columns which total width must be 12/12.
To achieve what you want you should wrap 2 6-col divs in a row.
<div class="container">
<div class="row">
<div class="col-md-6">
Left form
</div>
<div class="col-md-6">
Right form
</div>
</div>
</div>
I wanted to ask – if I have 3 columns of DIVs that I want to responsively change to 2 and 1 depending on the width of the user's screen (1 column for mobile devices) – what's the best way to do it? The div elements should simply stack under each other.
<div class="container">
<div class="row">
<!--left-->
<div class="col1">
</div>
<!--/left-->
<!--center-->
<div class="col2">
</div>
<!--/center-->
<!--right-->
<div class="col3">
</div>
<!--/right-->
</div>
</div>
<!-- /.container -->
Thank you!
PS My design looks like this:
To
you can accomplish this with the float property. You'll just need to clear the floats by adding overflow:hidden to the parent or using a clearfix:
FLOAT EXAMPLE
CSS
.row{
overflow: hidden;
}
.col{
background: red;
width: 200px;
height: 200px;
float: left;
margin: 5px;
}
OR
You can use display: inline-block; to do the same
.col{
background: red;
width: 200px;
height: 200px;
display: inline-block;
margin: 5px 2px;
}
INLINE-BLOCK EXAMPLE
For a project of mine, I'm using Skeleton Boilerplate for the first time. And I'm looking for the best practice of centring a div in Skeleton without bashing into the rules of Skeleton.
At the moment, I've the following structure for a login page.
HTML:
<div class="container">
<div class="sixteen columns vertical-offset-by-one">
<div id="loginBox">
<img src="images/yeditepeLogo.png" alt="Yeditepe Logo" class="yeditepeLogo" />
<form action="" id="loginForm">
<input type="text" name="username" required placeholder="username" class="loginTextField">
<input type="password" name="password" required placeholder="password" class="loginTextField">
<input type="submit" value="Log In" class="loginButton" />
</form>
</div><!-- loginBox -->
</div><!-- sixteen columns -->
<div class="sixteen columns">
<p align="center">Click here to register</p>
</div>
</div><!-- container -->
CSS:
#loginBox, #registrationBox {
width: 470px;
height: 450px;
background-color: white;
left: 245px; */
top: 20px; */
position: relative;
margin: 0px auto; }
#registrationBox {
height: 500px; }
.yeditepeLogo {
position: relative;
left: 40px;
top: 33px; }
#loginForm, #registrationForm {
position: relative;
top: 45px; }
.loginTextField, .registrationTextField {
position: relative;
height: 40px;
width: 388px;
left: 40px;
border-color: #dedede;
border-style: solid;
border-width: 1px;
margin-bottom: 10px;
text-align: left;
font-size: 18px;
text-indent: 10px;
-webkit-appearance: none; }
.loginTextField:focus, .registrationTextField:focus {
outline-color: #ff9800;
outline-style: solid;
outline-width: 1px;
border-color: white; }
.loginTextField:nth-child(2), .registrationTextField:nth-child(3) {
margin-bottom: 40px; }
.loginButton, .registrationButton {
background-color: #77a942;
position: relative;
border: none;
width: 390px;
height: 60px;
left: 40px;
color: white;
font-size: 24px;
text-align: center;
opacity: 0.8; }
.loginButton:hover, .registrationButton:hover {
opacity: 1; }
As you can see, that #loginBox has a fixed width/height and it should always be on the centre of the page. margin: 0px auto code gives it the horizontal centring. But is it the best practice in Skeleton? Does Skeleton provide a better way?
Also how can I provide it's vertical centring?
There's actually a built in way of centering divs in Skeleton.
<div class="sixteen columns">
<div class="four columns offset-by-six">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
The offset-by-six in this case can be altered from one to fifteen, and offsets the column at hand by as many columns as entered. As a neat feature, the offsetting is not affecting alignment when smaller screens are used.
To clarify: This doesn't center the actual content in the div, but centers the div itself.
I know it has been a while since this question was asked, but maybe somebody else can use the answer.
I was able to accomplish centering with Skeleton by filling one-third column class with a space, then the next one-third column class with content, then another one-third column class with a space again.
<div class="one-third column"> </div>
<div class="one-third column"><p>Center of the screen.</p></div>
<div class="one-third column"> </div>
You can set the container to
.container {
position: absolute;
top: 50%;
left: 50%;
margin-left: -43 //replace with half of the width of the container
margin-top: -52 //replace with half of the height of the container
}
set the parent container or element to position: relative;
Here's a good article about How to Center Anything With CSS
Asus3000's answer is good as that is what I do and it works well. I would only add that on mobile, it adds quite a bit of unwanted vertical space. To avoid mobile vertical space, I use a class .filler and hide it on mobile.
HTML
<div class="one-third column filler"> </div>
<div class="one-third column"><p>Center of the screen.</p></div>
<div class="one-third column filler"> </div>
CSS
/* or whatever mobile viewport */
#media only screen and (max-width: 960px) {
.filler { display: none}
}
A way I believe works pretty good is:
<div class="container">
<div class="row">
<div class="two-half column">
centered div content
</div>
</div>
</div>
This makes the div centered and responsive. You can change margin-top to make it all the way in the middle, however changing width will (of course) not make it centered anymore.
Correct me if I'm wrong but this works for me! :)