I've got a very basic css question, but I'm not front-end so please forgive me...
I'm using vuetify, and v-flex to manage grid points. on medium size screens and above my card is taking 6 grids, on small size (means <960px) it's 12 grids.
<v-container>
<v-layout justify-center>
<v-flex sm12 md6>
<v-container>
<v-card hover class="mb-3">
<v-card-text>
<div class="viewport">
<div>
<p><b>We offer sth in this title:</b></p>
</div>
<div>
<ul>
<li>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,</li>
<li>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,</li>
<li>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,</li>
<li>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,</li>
</ul>
</div>
</div>
</v-card-text>
</v-card>
</v-container>
</v-flex>
</v-layout>
</v-container>
I'm adding basic css class to manage viewport of the div inside v-card
.viewport {
font-size: 1.5vw!important;
}
and it's seems working until I'm not resizing screen <960 px. Them viewport seems to base on screen width, not the div width.
Can anyone tell me what I'm doing wrong. It seemed to be easy to set up...
example in codepen:
https://codepen.io/anon/pen/oEOqLb
Related
I am working on a nuxt project with vuetify. There is one main header for the entire app already.
<v-app-bar app fixed> Main Header </v-app-bar>
I need to show another fixed header below the main header for a custom component. The problem is it is either overlapping or getting scrolled away. I tried https://codesandbox.io/s/nuxt-vuetify-forked-zgk86y?file=/pages/index.vue, but I am not exactly sure how to achieve this.
I think your codesanbox vuetify setting has some problems. But anyways, this is how it can be done (There are several ways and this is the simple one):
<v-app>
<v-main>
<v-app-bar color="warning" dark app fixed> Main Header </v-app-bar>
<v-app-bar color="primary" dark fixed class="mt-14"> component header </v-app-bar>
<v-card class="mt-12">
<v-card-text>
<div v-for="n in 5" :key="n">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo
inventore consequatur, explicabo pariatur aspernatur deserunt beatae
perferendis culpa deleniti necessitatibus amet odio sed, ea sint in!
</div>
</v-card-text>
</v-card>
</v-main>
</v-app>
You can check the whole code in codepen.
How do I make the image go under the text in the mobile? And for the text to go on the left side, instead of being more on the right - if this makes sense :)
CSS (Image): https://pastebin.com/pGBdbBhs
CSS (Content): https://pastebin.com/1SY2JXUa
HTML:
<div class="content">
<div class="left-200">
<div>
<h3>Lorem ipsum</h3>
<div class="padding-4"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, natus pariatur aut soluta sed consectetur deleniti tempore ducimus at quas officia, deserunt eaque magni!</p>
</div>
<div class="padding-10"></div>
<img src="./images/default-image.png" alt="Image" class="image"/>
</div>
</div>
Desktop:
Mobile:
Thank you!
To make a responsive design you can either go the bootstrap root or you can do the #media in the CSS. Take a look at this site which will point you in the right direction.
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I solved it! Basically I wrapped it up in a div and set display:none; if the device was on mobile. And I did the same thing for desktop!
Your CSS and HTML looks a little random here and there. For example those padding divs. Also your .left-200 class has two display properties. I would recommend to clean it up and then add the paddings, margins etc.
You really only need display: flex and flex-wrap for this task and set the other values like width accordingly.
.content {
padding: 200px 50px;
display: flex;
flex-wrap: wrap;
}
#flex-text {
width: 400px;
}
<div class="content">
<div id="flex-text">
<h3>Lorem ipsum</h3>
p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <!--
-->Eius, natus pariatur aut soluta sed consectetur deleniti tempore ducimus at quas officia, deserunt eaque magni!</p>
</div>
<div id="flex-image"> <img src="./images/default-image.png" alt="Image" class="image"/> </div>
</div>
Note, I'm really not trying to create a 'code for me plz' topic, I actually tried to solve this myself but I'm unable to. I found similar topics but they didn't solve my specific issue.
So, I have the following website design in Illustrator:
I need to create a container-fluid, which needs to be 50% image, and 50% color. I tried so many different methods but just couldn't make it work, especially the responsiveness.
Is there anyone who can help me out solving this? Really curious how this is done within Bootstrap.
By the way, for load time efficiency, I'm working with Bootstrap.grid.css, I do not have full access to all Bootstrap classes.
Consider reading carefully Bootstrap's documentation for its Grid Layout
You can do what you need with simple row and columns; how responsive the content inside of those behaves depends on what you build
.img-bg {
background: url("https://via.placeholder.com/1600")
}
.color-bg {
background: green;
text-align: right;
}
.row>div {
height: 100vh;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-6 img-bg">
<span>This background is an image</span>
</div>
<div class="col-6 color-bg">
<h2>Lorem Ipsum</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea fugiat architecto blanditiis eaque laborum, vel voluptatum voluptas asperiores odio quia error commodi ratione dolorem, cupiditate dolor eius nulla atque quidem?
</p>
</div>
</div>
</div>
How do I fill a column vertically. I currently have this app.
I want to spand the vertical items vertically to take the rest of the page. I have tried for hours reading the documents and checking other posts but I just don't knows what is wrong. I'm just started using angular material and I'm new to the concept of flex box.
this is my code.
<body ng-cloak layout="column" ng-app="app">
<div layout="row" flex>
<md-sidenav layout="column" md-component-id="left" class="md-whiteframe-1dp" md-is-locked-open="true">
<md-list>
<md-list-item>
<md-button ng-click="">
<md-icon md-font-set="material-icons">face</md-icon>
Alex
</md-button>
</md-list-item>
<md-list-item>
<md-button ng-click="">
<md-icon md-font-set="material-icons">face</md-icon>
Tara
</md-button>
</md-list-item>
</md-list>
</md-sidenav>
<md-content flex id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi at consequuntur doloremque
dolores
dolorum eaque, exercitationem expedita facere fugiat ipsam nemo possimus quod recusandae repellendus, saepe
sequi
vitae, voluptas!
</p>
</md-content>
</div>
Code Pen Example
I just notice that the parent div .app-wrapper causes the problem, but I want to keep it.
You're looking for viewport height. In your case, you could apply to md-sidenav via class:
.full-height{
height: 100vh;
}
I've spent a lot of time trying to figure out how I can create a layout similar to this, where the pages content is constrained by the container element's width, but the column on the left has a background that stretches to the far left of the user's screen (the yellow one in the example).
I'm trying to do this with Bootstrap, but it seems impossible as the container element contains the content of the page and also it's background.
Here is the JSFiddle for what I have so far.
Some sample code of the structure:
<div class="row">
<div class="container">
<div class="col-xs-6 left-one">
This one's background needs to stretch to the far left, on large screens.
</div>
<div class="col-xs-6 right-one">
This one's background can be that of the body
</div>
</div>
</div>
<div class="some-content">
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos minima laudantium, id a, porro aliquid expedita. Iste beatae provident architecto dolorum aspernatur maiores, ratione deserunt nesciunt magni unde repudiandae eaque.
</div>
</div>
Would really appreciate if someone can solve this mystery for me.
Here's the full code:
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
body{
background: #eee;
}
.left-one{
background: yellow;
height: 500px;
padding-top: 20px;
}
.right-one{
background: #eee;
height: 500px;
padding-top: 20px;
}
.some-content{
background: lightslategray;
padding: 20px 0;
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="row">
<div class="container">
<div class="col-xs-6 left-one">
This one's background needs to stretch to the far left, on large screens.
</div>
<div class="col-xs-6 right-one">
This one's background can be that of the body
</div>
</div>
</div>
<div class="some-content">
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos minima laudantium, id a, porro aliquid expedita. Iste beatae provident architecto dolorum aspernatur maiores, ratione deserunt nesciunt magni unde repudiandae eaque.
</div>
</div>
Just do what the guy have done in example & use the before element.
DEMO
CSS:
.left-one:before{
background: yellow;
bottom: 0;
content: "";
position: absolute;
right: 100%;
top: 0;
width: 9999px;
}