I have a list of items that I'd like to align by the top image, instead if the bottom text as it is currently doing.
Here is how it appears:
Is there a simple way that this is achieved in CSS? I am using Bootstrap, if there is a way to do that also.
It sounds like what you're asking for is actually the default behaviour...
<div class="containerI">
<div class="col-xs-2 text-center">
<h3 class="glyphicon glyphicon-ok-circle"></h3><!-- put your image here instead of h3+glyphicon if you're using a jpg -->
<p>Simple Visa Card
</p></div>
DEMO: http://www.bootply.com/KEN4TgnX0f
Is it possible you've got some custom CSS affecting this?
Related
I have this HTML & CSS code which I'm using to generate updated images dynamically. I am using Z-index to manipulate the images. One of the images is constant and is the background image. The other two images change and are on top of the background image. I have used style to keep them well aligned on the background image. I will choose what image to show depending on the post content so that is not a problem. I want to use this simple html and some style which I'll apply.
I found a suggestion here https://www.isitwp.com/add-html-to-feature-image-metabox/ but this seems like it's just adding more description to the image. What I have in my html are basically images stacked together into one with the top two images changeable. Is this possible even if it means using the default background image as the basis so that we still have the two images showing plus the background? Please help if you understand what I'm trying to do here. Thanks
<div id="backg">
<div id="picback"><img src="\images\picback.png" alt="description"></div>
<div id="pica">Name A</div>
<div id="picb">Name B</div>
<div id="picaback"><img src="\images\imga.png" alt="description"></div>
<div id="picbback"><img src="\images\imgb.png" alt="description"></div>
<div id="picalogo"><img src="\images\abc.png" alt="description"></div>
<div id="picblogo"><img src="\images\cba.png" alt="description"></div>
</div>
I'm stacking a series of small divs to show a series of statistics. The problem is to display them correctly on a mobile phone. Can you suggest an alternative for me? It's worth noticing that this design came from an admin template.
This is what you'd see on a bigger screen:
And the following is the way the cubes are displayed while using a cellphone:
<div class="col-2">
<div class="bg-success p-10 text-white text-center">
<i class="fas fa-warehouse m-b-5 font-16"></i>
<h5 class="m-b-0 m-t-5">414</h5>
<small class="font-light">Bodega stock</small>
</div>
</div>
I've read about responsive typography but I'm not sure how should I proceed.
From a designer point of view, I think what you should do is making the bottom columns be rows instead, so, in mobile, they would all be the same width as the blue box.
This should be pretty easy using Bootstrap 4, your col div would be:
<div class="col-xs-6 col-sm-4> ... </div>
Something like that.
In my opinion you have two options :
Display the 'total disponible' and 'total reversa' side by side on big screen, but one under each other on responsive, which can be easily done using flexbox
Like a fellow said above, display the green, black and yellow divs in column, with width set to 100%
I'm building a section with a text on the left side and a background image tied to a right side of a browser. Both text and image have about 50% width while using desktop device.
For desktop device solution, I've coded it like this:
http://www.bootply.com/xxyOcA9N5n
However, problem arises when I try to make it responsive. My preferred goal would be that the content gradually "pushes" background image to the right (out of the browser's "canvas"). In extreme case, it would look like this: Image nearly disappeared and text is readable.
Can you please help me figure out, how to solve this?
Add another col-sm-6 and place the image in there with a 100% width so it scales as the size gets smaller. You can also use media queries to define how you want it to look at various sizes.
<div class="container-fluid hp-about">
<div class="container">
<div class="row">
<div class="col-sm-6">
<h2>Company</h2>
<p class="large">We are doing this and this and it is
awesome because this and that. Yeah and also this and that.
And also that.</p>
<p>More about us ยป</p>
</div>
<div class="col-sm-6"><img src=
"http://i.imgur.com/HGp1ot6.png"></div>
</div>
</div>
</div>
I just started to use angular ui-layout to allow splitting panes in a UI.
I'm trying to create a sidebar that has this blue element on the bottom
Is there a way to trick the ui-layout directive to achieve this? I tried doing size, but that just does absolute sizing, I want the bluebox just take up some space (showing 100% of its content) and the element above it needs to scroll and take up the rest of the vertical space.
EDIT: added the HTML
<ui-layout options="{ flow: 'row' }">
<div ui-layout-container> top part </div>
<div ui-layout-container> blue box</div>
</ui-layout>
I don't know why you want to use ui.layout, but I would not recommend to use it to achieve what you want.
ui.layout uses flex box model and you can use it by yourself without using another invasive javascript layout. You can fully achieve what you want using css only.
This is what I did to achieve what you want only using CSS. http://plnkr.co/edit/0mSxkNC5wl6WTbWc81z6?p=preview.
<div class="container flex flex-column">
<div class="top flex flex-row flex-auto flex-stretch">
<div class="flex-auto">Top</div>
<div class="sidebar">sidebar</div>
</div>
<div style="background:blue">Bottom</div>
</div>
If you are very interested in using Flex layout, I would recommend to use Angular Material Design, and it is advanced and makes more sense than ui.layout.
To know more about flex box, you can see this example.
http://plnkr.co/edit/lxx7QCwZbeZyyUtwiCym?p=preview.
I'm trying to do this when someone clicks a box:
It's seems simple, if I put the gray div inside the ng-repeat, when a user clicks a box, the new div would be shown.
<div ng-repeat="friend in friends" ng-click...>
<div>
{{friend}}
</div>
<div collapse="expand">
some content
</div>
</div>
But, what if I don't want to repeat the gray div? (Let's say it's a bunch of html that is not necessary to be repeat by each element).
So, I have this plunker, where the gray div is outside the ng-repeat.
Is it any possibility to do what you see in the image with pure CSS or some trick in angular or javascript?
I heard that I could use jQuery to inject the html, but maybe could exist a cleaner way.
Considerations:
A row could have one to n items.
What I have tried
Put the gray div with position relative, but this would not push down the other divs.
First of all your task is unachievable unless you change markup. The result should be like this.
<div class="row">
<div class="col-md-4">
Age
</div>
<div class="col-md-4">
Age
</div>
</div>
<div class="row">
<div class="col-md-4">
Age
</div>
<div class="col-md-4">
Age
</div>
</div>
For that you need to use custom filter. I took it from here
how to split the ng-repeat data with three columns using bootstrap
Since you use jQuery you can easily manipulate elements now. You can get you collapse div and append it to every row.
You modified working planker is here
http://plnkr.co/edit/WUGDcUsxqRqrrmK4I9Lh?p=preview