I have a UI where I display an icon with some text(on the right side) in the same row on a tile.
The problem here is that when I resize the screen, the text gets wrapped to the next line and even if I decrease text size, it still does not align next to the icon.
Can anyone help me out?
Here's a visual representation. This is when screen is full size:
And then this is what happens when it is resized:
How do I bring the text next to the icon like in the original size (full size)?
Here's the code for displaying the icon and text:
<div class="row">
<div class="col-md-2 resize" data-toggle="tooltip" title="Date of Birth">
<i class="i class="fa fa-calendar fa-2x icon-white" style="margin-top:17%;"></i>
</div>
<div class="col-md-10">
<h4 class="icon-white m-h4" id="dob">16-Jul-2014</h4>
</div>
</div>
change col-md to col-xs
<div class="row">
<div class="col-xs-2 resize" data-toggle="tooltip" title="Date of Birth">
<i class="fa fa-calendar fa-2x icon-white" style="margin-top:17%;"></i>
</div>
<div class="col-xs-10">
<h4 class="icon-white m-h4" id="dob">16-Jul-2014</h4>
</div>
</div>
change the cols to a single line, like col-md-12. Then apply the icon as a background.
Alternatively, use
<div class="col-md-2 col-xs-2">
and so on.
Depending on your layout, you may need to adjust the cutting points, so the first approach is always better and desirable
Related
I want to have an effect where the picture is on left side of text, but when the screen is smaller, the text is on top and img is below.
Currently, I have the former, but when the screen size reduces, the img goes on top and text is on bottom. How do I reverse this?
Here is my code (theres a div for img and one for the description text):
<div class="container productwrap shadow-lg mt-3">
<div class="row">
<div class="col-md-4 p-2 m-3 border">
<img src="../Pictures/snacks3.jpeg" alt="snacks2">
</div>
<div class="col-md-7 p-2 my-3 border rounded">
<p class="newarrival text-center pt-3 font-weight-bold">Trendy Snacks</p>
<h2 style="display: inline-block" class="p-3 ml-2 border rounded">Brown Sugar Yogourt</h2>
<span class="badge badge-success align-top m-1">NEW!</span>
<p class="lead font-weight-bold text-warning m-4">CAD $9,99</p>
<p class="m-4"><strong>Unit: </strong>2 x 100g</p>
<p class="m-4"><strong>Availability: </strong>In Stock</p>
<label for="qty" class="ml-4"><strong>Quantity:</strong>
<input type="text" id="qty" name="qty" class="small w-25 text-right" value="1">
<button class="btn btn-outline-success btn-sm" href="#" role="submit">Add to Cart</button>
</label>
<p>
<button class="btn btn-info btn-sm m-2 mr-3 rounded-pill" data-toggle="collapse" data-target="#moreinfo">More info</button>
<div id="moreinfo" class="collapse text-wrap">
This delicacy instills the careful mix of brown sugar and yogourt. Its rich nutriments will revitalize your spirit and set you ready for your day.
</div>
</p>
</div>
</div>
</div>
I have tried using float-right/left but it doesn't budge at all.
I want to have an effect where the picture is on right side of text, but when the screen is smaller, the text is on top and img is below. Currently, I have the former ...
I'm not seeing you have the former. On bigger screens, the picture is on the left side of text...
If you switch the order of the picture structure and your text structure, you achieve both:
<div class="container">
<div class="row">
<div class="col-md-7">
...
</div>
<div class="col-md-4">
<img />
</div>
</div>
</div>
demo: https://jsfiddle.net/davidliang2008/5m2z4s90/4/
Updates:
You can use order utilities class to achieve what you want:
<div class="container">
<div class="row">
<div class="col-md-4 order-2 order-md-1">
<img />
</div>
<div class="col-md-7 order-1 order-md-2">
...
</div>
</div>
</div>
On small screens, the image is 2nd item so it will appear at the bottom. On medium break point and up, you switch it back so that the image will appear on the left of the row.
demo: https://jsfiddle.net/davidliang2008/5m2z4s90/9/
Use CSS Grid and align how you want to align in default. Then use a media query and when the view gets smaller just change the div size and order of grid layout.
A common more complex responsive design technique is to use 'Media Queries' in CSS.
To start, align the items as you like them by default. Then, choose a limit for your resizing (ex: 'width less than 600px'). Once you have that set, you can begin a media query like so:
#media (max-width: 600px) {
*selector* {
*change you want to make when screen is smaller than 600px*;
}
}
Doing this will cause the changes to the CSS rules to automatically apply whenever the width of the screen is less than 600px, but it should also revert back to the default values whenever the screen increases in size again.
Media Queries can get a lot more complex and involved than in this example, but they are incredibly useful once you get used to them. I strongly suggest reading into them some.
I have a bootstrap row, with 4 columns in it. Originally I had 3 columns with icons, and they all aligned perfectly. I added a fourth in, and now the new one I added is slightly further down the page than the rest. It just doesn't sit in line
<div class="col-12 padding">
<h3>Also take a look at my Github, Free Code Camp, Team Treehouse and LinkedIn profiles!</h3>
</div>
<div class="col-xs-12 col-sm-3">
<i class="fab fa-github icons"></i>
<h4>GitHub</h4>
</div>
<div class="col-xs-12 col-sm-3">
<i class="fab fa-free-code-camp icons"></i>
<h4>Free Code Camp</h4>
</div>
<div class="col-xs-12 col-sm-3">
<i class="fi-social-treehouse icons"></i>
<h4>Team Treehouse</h4>
</div>
<div class="col-xs-12 col-sm-3">
<i class="fab fa-linkedin icons"></i>
<h4>LinkedIn</h4>
</div>
It's the third column (team treehouse) that doesn't sit in line with the rest.
Also, they are all within a row div, it's just not shown.
EDIT:
It seems the problem is 3 of the icons are from Font Awesome, and the Treehouse icon is from Foundation Icons. Now I know the problem, but im not sure how to fix it. They are all styled to the same size
If you believe it is the icon, test your theory by adding a border to the icons class. This way you will be able to tell if the third icon is positioned oddly, or has padding built into the image itself. If that is the case copy the image and edit it to suit.
Or you can hack the offending icon with some CSS like so:
.fi-social-treehouse {
margin-top: -20px;
}
Well, I checked inside the CSS sheet for Foundation Icons and compared it to the CSS sheet of Font Awesome, and couldn't find a difference. So I ended up hard coding a negative margin to the column that the treehouse icon is within. If anyone has a better solution, I would be happy to hear it!
I have web page where whole page is divided in two parts left and right. The partition is shown below. In the left section, I have two side by side buttons and one of the button having long text string as 'Edit Categories'. This button overflows the text and eventually collapses and stacks on top of another. I am developer but i am not really into designing. Tried using flex but seems not working. The expected behavior for this one is two buttons should be side by side in large screen and stack in medium small and extra small resolution. I also tried putting col-sm, col-md, col-xs on my divs which contains <a> but noluck.
<!-- Start Left Section -->
<div class="col-lg-3 col-md-4 col-sm-12 col-xs-12 animated fadeInLeft categories-lst">
<div class="row">
<div class="col-lg-6">
<a onclick="toggleLoader('show')" href="/Rec/EditCategories" class="btn btn-default btn-block"><span><i class="fa fa-pencil"></i>Edit Categories</span></a>
</div>
<div class="col-lg-6">
<a onclick="showNewPost();" class="btn btn-default btn-block" id="showNewPost"><span><i class="fa fa-plus"></i> New Post</span> </a>
</div>
</div>
</div>
<!-- Start Right Section-->
<div class="col-lg-9 col-md-8 col-sm-12 col-xs-12 animated fadeInRight">
</div>
To achieve expected result, use below option
a{
white-space:normal !important;
word-wrap: break-word;
}
code sample - https://codepen.io/nagasai/pen/MVRwoN
See the following example:
<div class="row">
<div class="col-2">
<p>Error</p>
</div>
<div class="col-8">
<div class="progress error" data-toggle="tooltip" data-placement="bottom">
<div class="progress-bar error-bar" role="progressbar"></div>
</div>
</div>
<div class="col-2">
<a tabindex="0" data-container="body" data-toggle="popover" data-placement="right" data-content="Some random text">
<i class="fa fa-info-circle" aria-hidden="true" style="vertical-align: top"></i>
</a>
</div>
</div>
The text "Error" is not vertically aligned properly with the prograss bar and font awesome icon. I tried adding vertical-align: top to <p> but it did not make a difference. How do I correctly vertically align the text?
You can add line-height: 1rem; to <p>
Try to add the class align-items-center to your row, this will make all cols vertically aligned in the center of the row.
If you have any question about the Bootstrap grid system, check out the documentation, that's pretty good by the way.
The property vertical-align only applies to inline and table cells elements, check out the MDN documentation about that. So, vertical-align will only work if your <p> element is an inline element, and if has enough height to be aligned.
On my web page I have a centered logo/lead along with two divs below the logo/lead. I wish to make the divs seem centered in accordance to the logo/lead.
I have attempted to center the divs by using Twitter Bootstrap's spans but the divs are still not truly centered.
<div class="row-fluid marketing">
<div class="span3"></div>
<div class="span3 text-glow-hover-with-delay">
<h2><i class="icon-beaker"> </i> Genuinely Tested</h2>
<p>
Guru has undergone an enormous amount of testing
<br />
via <a href="http://junit.org" rel="tooltip" data-toggle="tooltip" data-placement="bottom" title=""
data-original-title="Visit their website!">JUnit</a>; the programmer-oriented testing framework.
</p>
</div>
<div class="span4 text-glow-hover-with-delay">
<h2><i class="icon-book"> </i> Full Documentation</h2>
<p>
We provide full-source/full-documentation for our users.
</p>
</div>
</div>
If you need more information you can take a look at the website: http://guru.jire.org
You can make them appear truly centered by changing the span4 to a span3 (odd-equality rule) and then setting the divs to align-center. Full source below.
<div class="row-fluid marketing">
<div class="span3"></div>
<div class="span3 text-glow-hover-with-delay" align="center">
<h2><i class="icon-beaker"> </i> Genuinely Tested</h2>
<p>
Guru has undergone an enormous amount of testing
<br />
via <a href="http://junit.org" rel="tooltip" data-toggle="tooltip" data-placement="bottom" title=""
data-original-title="Visit their website!">JUnit</a>; the programmer-oriented testing framework.
</p>
</div>
<div class="span3 text-glow-hover-with-delay" align="center">
<h2><i class="icon-book"> </i> Full Documentation</h2>
<p>
We provide full-source/full-documentation for our users.
</p>
</div>
</div>
It may help to look at it this way:
The borders on the divs help you see what is happening, the diagonals show you where the true center is.
If you give the divs consistent widths they will look more symmetrical and centered, that may be all you need to get the look you want.