So have this problem and didn't really find a solution to solve it.
I have this initial design when the screen is large:
And when the screen is resized to a small screen I want to have the following
So It's actually a problem with the first one to have to logo as big as the Title and text together, and then move the title above the logo.
It is all about positioning.
Title
logo
text
Make a parent div with class row.
Then inside, create your title first with class col-md-6 col-xs-12 pull-right. This will cause the title to float right. Do the same with the text.
The logo should get the same classes, but pull-left instead of pull-right. This will cause it to float left.
But on mobile all will be below each other.
Check out the fiddle:
https://jsfiddle.net/80r028jq/1/
Related
So on desktop I want 4 columns with an image above the text like the first image (so col-3), very easy. (I have the image and text in the same col)
but on mobile I want the icon appear on the left and the text on the right as per the second image.
i have tried floating the image lleft and the text right but that doesnt work I tried splitting the image and the text but they won't line up properly on all screen sizes if i do.
This feels like it should be so easy but my brain is stuck.
You can try using Flex instead of floating divs for the div that contains col class
See here an example - https://playcode.io/995433 (Try to resize the playground viewport to see the mobile layout). I hope this is what you need. I've used BS inline classes for convenience.
Bootstrap align div horizontal to vertical on responsive There is your reference
I'm having trouble understanding #angular/flex-layout. I've read numerous posts, blogs, and examples but can't get it to work, as I want it to.
I want to have one large mat-card, filling the complete width of the screen.
Inside this card I want some text and to the right of the text an image.
Below this full-width card I want 6 smaller cards. On a large screen 3 columns, a smaller screen 2 columns and the smallest screen 1 column.
Here's my stackblitz: https://stackblitz.com/edit/angular-6iqcgo
With this demo I have several issues:
The image in the full-width card is not scaled proportionally. This distorts the image a lot on different screen sizes. How to fix this?
The 3 columns with the smaller cards are not evenly spaced. The 3rd card should go a bit more to the right. The second row, however, is good. How to fix this?
The first small card has less text and is less high. But I would like to have all card have the same height and preferably the mat-card-actions at the bottom. How to do this?
The top of the cards of the second row overlap the bottom of the cards of the first row. How to fix this?
Any help will be much appreciated.
I would suggest putting the img in a div that has fxFlex on it:
<div fxFlex="0 0 50%">
<img mat-card-image src="https://i.pinimg.com/originals/79/3b/ca/793bca86db40af44ad03534f6927626b.jpg" alt="Free image">
</div>
Remove the fxLayoutGap="32px" from the containing div.
They all appear the same height to me. For the actions to be at the bottom of the card you should be able to use mat-card-footer to attach to the bottom of the card.
You can set a margin-top or margin-bottom on the mat-card to add a gap when it wraps.
I hate asking a "how do I do this" question, but I've tried everything I can think of and it's just not working.
I have a page design in which there is a center column of specific width (960px) which needs to live in the horizontal center of the page as long as the browser is wider than that width.
I'm entirely unclear on why, but every combination of columns and offsets I try leaves the content off center in one way or another.
I know how to do this with margin:auto but then I lose bootstrap's auto-magical resizing of everything for mobile.
So... is there a way to keep the responsive nature of the site as per bootstrap but to have it put the content into a center strip of a specific width (leaving the sides empty) and yet collapsing down to the -xs- variant when the page is pulled up on mobile?
What you'll need to use is the bootstrap container, you can view the docs about it here: http://getbootstrap.com/css/#overview-container
it is as simple as:
<div class="container">
..some content..
</div>
In the normal prestashop theme, there is a box at the top of the category pages for a description of the category as a whole. The box has an outline and contains a picture and some text.
The text is normally below the image, so the block takes up a lot of room. I would like to float the image to the left, and wrap the text around it, so it's smaller.
I suspected this would be easy, because the image and text are in divs, and both of them are in another div for the outline. So I simply added float:left to the image's DIV.
The image moved to the right OK, and the text flowed too. However, the surrounding DIV did not resize properly, so the image now runs right out of the box.
How do I get the enclosing DIV to resize properly?
You need to force the containing div to wrap the floated contents. You can do this a few ways, one being to add overflow:hidden.
.content_scene_cat {overflow:hidden;}
I know about margin auto. However, it does not work for me here.
I'm trying to center a (possibly long) line of text over a (relatively narrow) image. If the text is longer than the image, it should spill out of the resulting box on either end, so the whole complex is only as wide as the image.
The markup is something like this:
<div class="bb">
<a href="blahblah">
<b>CaptionAbove</b>
<img src="blah.png"/>
</a>
<b>below</b>
</div>
.bb is an inline-block so these bb's pop together horizontally in a row. CaptionAbove may be longer than the img is wide, but should not make the neighbors spread out! elements a and b are display:block, so everything inside here stacks up vertically.
If I give the <b> a specified width like 1em so it doesn't grow to surround the text, then the overflow of the text is on the right only, and the artificial box is flush left within the enclosing <a> block.
I like the markup grouping the img and the caption together, and a table would not only lose that but the mouse-over effects knowing that the vertical stack is all one item.
Any suggestions welcome.
How's about something like this?
http://jsfiddle.net/UvbQJ/1/