Hey i was just messing with some css transforms and i can't make this happen,
https://codepen.io/simobm/pen/YvoOMO
Im using Bootstrap 4 and so i make 2 columns , on the left there is an image and on the right some text, now i want the text to to be vertical and centered so i use :
transform:rotate(90deg)
on the text and :
align-items: center;
text-align: center;
On the column itself . The problem as you can see is that on mobile, the text breaks to 2 lines and 3 lines consecutively.
There is a handy text-nowrap class that you can apply that will stop the text from becoming multiple lines.
<div class="container">
<div class="row mt-5">
<div class="col-9 ">
<img class="img-fluid" src="https://images.unsplash.com/photo-1521818372696-23e67aff37a5?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=b42f31aba73642725afa0a222d211542" alt="">
</div>
<div class="col-3 d-flex align-items-center justify-content-center">
<p class="rotate text-nowrap">Azurmendi by ENEKO ATXA</p>
</div>
</div>
</div>
CodePen
Without handling text resizing, this can have some potentially undesirable effects on mobile.
Useful Links
Bootstrap text-nowrap Documentation
Related
I have been working on a game and, for certain things, I used absolute positioning. In particular, I need it for some moving animations where I have to slide elements around and overlap them to create an effect.
I'm trying to work on making the game good-looking on mobile, and I've been running into some problems caused by Bootstrap columns that contain those absolutely positioned elements.
This is the look I'm trying to get (aside from the badly aligned number), notice the red squared row in the middle:
The whole center part of the screen (the row with buttons, emojis, and the centered card icon underneath) is a row containing cols. This is some of its markup
<div class="col order-1 order-xl-1 col-4 col-xl-2">
<div style="display:inline-block">
<p class="backgrounded-text" style="white-space: nowrap; text-overflow: ellipsis;"><span id="turn_elem">...</span></span></p>
<p class="backgrounded-text">Carta attuale: <span id="curr_card"><img class="card_icon" /></span></p>
</div>
</div>
<div class="reaction_box order-2 order-xl-2 col col-4 col-xl-2">
<span style="padding-left:5px!important;padding-right:5px!important" class="reaction_title">Reazioni:</span>
<table>
<!-- emojis ... -->
</table>
</div>
<div class="col order-5 order-xl-3 col-12 col-xl-3">
<span>...</span><br />
<span id="hidden_card">
<img class="card_placeholder" src="..." />
</span>
<span id="card_stack" class="slide_to_right">
<img class="card_placeholder" src="..." />
</span>
<div id="stacked_card">
<img id="stacked_front" class="card_placeholder" src="..." />
</div>
<div id="hidden_uncovered_card_div">
<img id="hidden_uncovered_card" class="card_placeholder" src="..." />
</div>
</div>
<div class="col col-4 order-3 order-xl-4 col-xl-3">
<button style="width: 49%" class="btn btn-lg btn-dark" id="doubt" #click="doubt()" :disabled="playing_animation">Dubito!</button>
<button style="width: 49%" class="btn btn-lg btn-dark">
Metti giù
</button>
</div>
</div>
The img that has id hidden_card is a card to the left of the red one that is made visible and slides to the right to cover that (it uses jQuery animate to manipulate the position). On top of stacked_card, which is the main red card that's displayed in the screenshots, there's another copy of it, that is flipped with jQuery and moved to the right to overlap hidden_uncovered_card. This is pretty much how the animations work. They all depend on using position: absolute and manipulating the positioning.
For some reason, the actual look I'm getting with the above code is this:
There is some space in between the three columns on the top and the one containing the red card back, and I don't understand where it is coming from.
Removing all the position: absolute seems to fix this, but of course, then all the animations that depend on it stop working.
Is there any way to fix this positioning without removing the position: absolute? It'd be a pain to have to rewrite the code for all the animations, as it's working perfectly on desktop.
Here's a static webpage that contains the markup. You can turn it to mobile view (the screenshots were taken as iPhone 6/7/8 mode) and see for yourself.
click
The actual app (a beta version, that is) can be found here, in case you wanted to see how the animations work. If you need any additional information, just let me know.
Bootstrap is using a 12 colums grid.
Check how you use them.
You have:
<div class="col order-1 order-xl-1 col-4 col-xl-2">The two button on the left<div>
<div class="reaction_box order-2 order-xl-2 col col-4 col-xl-2">the emojis</div>
<div class="col order-5 order-xl-3 col-12 col-xl-3">the red cards</div>
<div class="col col-4 order-3 order-xl-4 col-xl-3">the three button on the right</div>
You should clean that!!!
Example:
col followed by col-4 is the same as just col-4 where col-4 overrides col.
order-1 and order-xl-1 is redondant if there is no order-md-3 (for example)
Just order-1 is enought here.
For these 4 divs, make sure you use the 12 grid spaces correctly.
So about the col and col-* usage, for mobile size, you actually have 24 spaces used out of 12.
4 spaces
4 spaces
12 spaces
4 spaces
And whent the col-xl-* applies, you have 10 spaces used out of 12. Is that on purpose?
2 spaces
2 spaces
3 spaces
3 spaces
So here is what I suggest for a start:
<div class="col-3 col-xl-2 order-1">The two button on the left<div>
<div class="reaction_box col-4 col-xl-2 order-2">the emojis</div>
<div class="col-2 col-xl-3 order-3">the red cards</div>
<div class="col-3 order-4">the three button on the right</div>
which doesn't change the xl size at all, but produces this (iphone 6/7/8 mode):
That's a start.
So the trick is to have the classe in order... All the col-* from default to the bigger specific size... And then the order-* in order too. That make the markup readable.
;)
EDIT
To have the red cards looking like on another row :
<div class="col-4 col-xl-2 order-1">The two button on the left<div>
<div class="reaction_box col-4 col-xl-2 order-2">the emojis</div>
<div class="col-10 col-xl-3 order-4 order-xl-3 sm-translateUp">the red cards</div>
<div class="col-4 order-3 order-xl-4">the three button on the right</div>
Notice the order changed and that there is an additional .sm-translateUp class which would be:
#media screen and (max-width: 576px){
.sm-translateUp{
transform: translateY(-85px);
}
}
That makes:
Now that really looks like a hack... (LOL) But since that col is trapped inside its parent .row, that is all I think of for the moment.
So have that class defined inside all necessary #media rules for each bootstrap break points:
sm: >= 576px
md: >= 768px
lg: >= 992px
xl: >= 1200px
I want the text to look like this on my image:
which is slightly away from the "Center" point of the image(as i want to avoid the phone in the image), so text-center wouldnt work. I currently set the division of the row to "relative" and the text to "Absolute" in order to even get the text on top of the image. But when i resize the image, it will be displaced.
Code:
<section>
<div class="col-lg-12 text-center"style="margin: 0;padding: 0;position: relative;">
<img class="img-fluid" style="width:100%;" src="img/phone-transparent.png" alt=""></img>
<h2 style="color:red;position: absolute; top: 120px; width: 100%;">This is also</br>available on your mobile.</h2>
</div>
</section>
On original screensize:
On a different screensize:
This can be done using only Bootstrap 4 classes. Read the documentation on using the grid, and the utility classes for positioning and flexbox. You don't need all the inline CSS styles.
<div class="container-fluid">
<section class="row no-gutter align-items-center">
<div class="col-lg-12 text-center p-0 d-flex align-items-center">
<img class="img-fluid position-relative mx-auto" src="//placehold.it/1900x400" alt="">
<h3 class="w-100 position-absolute text-danger my-auto">This is also<br>available on your mobile.</h3>
</div>
</section>
</div>
Demo
Remember that .col-* must be placed in the .row, and the .row
should be inside a container.
You can use the spacing utils and CSS object-fit on the image to get the position and size: Demo 2 (you will need to tweak this as desired).
I want to create a call-to-action box with centered content
The box is contains two rows
the first row has the title and the second a variable amount of images, with a maximum of 12 (if greater than, then it will be three or more rows).
The text get perfectly centered using .text-center.
However i cannot create a div with the width of the content.
What i have now:
<div class="container">
<div class="row">
<div class="col-md-12" style=" padding: 10px 0 0;">
<div class="row text-center">
<div class="col-md-12 animated fadeInLeft">
<span class="color-green">Title</span>
</div>
</div>
<div class="row text-center">
<div class="col-md-9 center-block">
<!-- Content / Images-->
</div>
</div>
</div>
</div>
</div>
I tried multiple setups but the center-block doesn't seem to place the col-md-9 in the middle. (even though it does apply margin: 0 auto;)
What can i do to create equal width images in the center of their container, with variable amount. I'm using Unify Template which is based on Twitter Bootstrap 3
Since text-center affects on inline-level elements(children) only, you need to make them inline. It's clear. So all you need is to make <div class="col-md-9 center-block"> inline. Do it:
.center-block {
display: inline-block;
float: none;
}
If you want to push not more than 12 images in one line without javascript, I think there's the only way:
.center-block img {
width: 8.2%;
}
I am learning how to become Front End Developer at Udacity. There is a project that I need to submit. I ran in couple of issues I couldn't find help with, some of my images and urls within divs don't want to align properly. I tried using this website as a solution https://codemyviews.com/blog/how-to-center-anything-with-css
because it offered most variations on aligning blocks... But none of them worked.
<div class="row">
<div class="col-4"><img src="http://www.panext.com/wordpress/wp-content/uploads/2012/09/question-63916_640-400x200.jpg"></div>
<div class="col-4"><img src="http://www.eu-projekti.info/eu/wp-content/uploads/2014/10/1159613_85120857-400x200.jpg"></div>
<div class="col-4 end"><img src="http://www.digitalzenway.com/wp-content/uploads/plan-to-eat-400x200.gif"></div>
</div>
These are images, I am trying to align first image to the left, 2nd to the center and 3rd to the right. I could align them by using margins and paddings in html, but I want it to work with responsive design.
<div class="row">
<div class="col-4">
https://github.com/udacity/Appify/
</div>
<div class="col-4">
https://github.com/udacity/Sunflower/
</div>
<div class="col-4">
https://github.com/udacity/Bokeh/
</div>
</div>
and these are urls right underneath the pictures, that aren't lining up, no matter what I try.
This is the screenshot of my webpage http://picpaste.com/Portfolio-NOGcuGm8.jpg
P.S. This is my first post at Stack Overflow, TIA!
You can use Bootstrap's text-center and text-right classes to modify inner alignment of columns.
<div class="row">
<div class="col-4"><img src="http://www.panext.com/wordpress/wp-content/uploads/2012/09/question-63916_640-400x200.jpg"></div>
<div class="col-4 text-center"><img src="http://www.eu-projekti.info/eu/wp-content/uploads/2014/10/1159613_85120857-400x200.jpg"></div>
<div class="col-4 text-right end"><img src="http://www.digitalzenway.com/wp-content/uploads/plan-to-eat-400x200.gif"></div>
</div>
If you aren't using Bootstrap, these classes simply apply text-align: center and text-align: right respectively.
I'm trying to reorder the columns on my website via Bootstrap's method of reordering columns depending on the screen size which works fine for most of the responsive layouts I'm testing apart from 1.
The layout having problems is the Tablet Landscape Layout (1024 x 768) which displays like this:
Every other screen displays the blue div and the right div either with the red div on top if the screen is too small or on the right with the blue div aligning itself exactly next to it if the screen is large enough.
This is the code I'm using right now:
<div class="container">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="row clearfix">
<div class="col-xs-12 col-sm-12 col-md-push-8 col-md-4 col-lg-push-8 col-lg-4 col-xl-push-8 col-xl-4" style="background: red">
Basket
</div>
<div class="col-xs-12 col-sm-12 col-md-pull-8 col-md-8 col-lg-pull-4 col-lg-8 col-xl-pull-8 col-xl-8" style="background: blue">
News
</div>
</div>
</div>
</div>
Does anyone know why the blue div is so far to the right on the Tablet Landscape layout rather than touching the red div like it should?
Some general markup issues:
First of all, there's no col-xl-*, so you can get rid of those.
Secondly, you don't need col-xs-12, since the default is for it take up the whole width unless otherwise specified.
Third, Bootstrap is mobile first, so larger sizes will override the existing smaller sizes, meaning if you don't intend on changing something, there's no need to specify the larger size again.
The actual issue is that col-*-pull-* is relative to where the element would be placed. Bear in mind, you haven't changed anything in the document flow. So the elements are positioned normally and then phase shifted with left or right. Since the blue container would normally start 4 columns over, you only need to pull it back by 4 columns, instead of 8.
The whole thing can be rewritten like this:
.red { background: red }
.blue { background: blue }
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row ">
<div class="col-md-4 col-md-push-8 red"> Basket </div>
<div class="col-md-8 col-md-pull-4 blue"> News </div>
</div>
</div>