<header class="row">
<div class="logo-box col-sm-6 col-xs-12">
<img class="header-logo img-responsive" src="https://s3-us-west-1.amazonaws.com/udacity-content/rebrand/svg/logo.min.svg" alt="udacity logo" />
</div>
<div class="nametag col-sm-6 col-xs-12">
<h1>SIYU WU</h1>
<p class="personal-title">
FRONT-END WEB DEVELOPER
</p>
</div>
</header>
The related style are shown below:
header {
display: flex;
}
.logo-box {
padding-top: 40px;
height: 120px;
}
.header-logo {
width: 300px;
height: 53px;
}
.nametag {
padding-top: 20px;
height: 120px;
}
I'm using bootstrap's framework but it seems not working. The two div each take 50% width no matter the screen size. But if I remove the second div the 1st one will take 100% width at xs size screen.
The bootstrap columns system depends on the display of the .row being block.
By changing it to flex, you've broken it. The children of flex elements have different rules for wrapping.
Related
the problem is that my css cards are overlapping, I need the three cards to have space from one another, whilst sitting side by side each other horziontally. I am using bootstrap also and saw a solution online to use float-left float-right to put images side by side, but this has had no effect on my html page when I've refreshed it so far.
.container {
width: 4000px;
margin: auto;
}
.card-white {
background: white;
box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
border-radius: 50px;
width: 400px;
text-align: center;
padding: 24px;
margin: 20px;
}
.card-white img {
width: 360px;
height: 360px;
object-fit: cover;
border-radius: 4px;
}
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Body -->
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="card-white">
<img src="https://via.placeholder.com/200.jpg" class="float-left">
<h3>Film Showreel</h3>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="card-white">
<img src="https://via.placeholder.com/200.jpg" class="float-center">
<h3>Monologue Showreel</h3>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="card-white">
<img src="https://via.placeholder.com/200.jpg" class="float-right">
<h3>Voice reel</h3>
</div>
</div>
</div>
</div>
The error is in your css code.
If you run this without your css it' works perfect.
First of all you don't need to customize the container size in bootstrap like this:
.container {
width: 4000px;
margin: auto;
}
Second, a fixed size can't be responsive like this:
.card-white {
width: 400px;
}
.card-white img {
width: 360px;
}
So try it without fixed-size.
You can manage this without css, only with bootstrap classes in your divs.
<div class="col-xs-12 col-sm-6 col-md-3">
check this, for bootstrap 4:
Toggle floats on any element, across any breakpoint, using our responsive float utilities.
Spacing, Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.
check this, for bootstrap 5:
Float bootstrap 5
Spacing bootstrap 5
Using flexbox might be a better approach:
https://coder-coder.com/display-divs-side-by-side/
.flex-container {
display: flex;
}
.flex-child {
flex: 1;
border: 2px solid yellow;
}
.flex-child:first-child {
margin-right: 20px;
}
You can refer to: https://getbootstrap.com/docs/4.0/utilities/flex/ for bootstrap.
Context:
I am trying to create 3 charts on 1 row (each has a minimum width) such that on window resize, the charts should also resize and may go to next row depending on the browser total width.
Problem:
Currently, I am missing something in the css because the chart is overflowing within the demo container below. The tooltip looks fine, but only half of the chart is seen in the container and both the axes are also hidden.
Has someone implemented something similar before? I want to understand how to load the charts in the div.
P.S. In the code below, highcharts-container is the inbuilt div which contains the charts. I am using the latest version of Highcharts and Angular 7.
My current html code -->
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-md4 demo>
<div class="demo-container">
<highcharts-chart [Highcharts]="Highcharts" [options]="options1" [callbackFunction]="cb1">
</highcharts-chart>
</div>
</div>
<div class="col-lg-4 col-md4 demo>
<div class="demo-container">
<highcharts-chart [Highcharts]="Highcharts" [options]="options2" [callbackFunction]="cb2">
</highcharts-chart>
</div>
</div>
<div class="col-lg-4 col-md4 demo>
<div class="demo-container">
<highcharts-chart [Highcharts]="Highcharts" [options]="options3" [callbackFunction]="cb3">
</highcharts-chart>
</div>
</div>
</div>
</div>
My css code (The main part) -->
.container-fluid{
width:100%
}
.demo{
margin: 20px 0;
min-width: 448px;
}
.demo-container{
position: relative;
border: 1px solid transparent;
box-shadow: 0 0 20px #1793f5;
width: 100%;
height: 100%;
}
.highcharts-container{
height: 100% !important;
width: 100% !important;
display: inline-block;
vertical-align: middle;
}
You could try to include the following CSS as a part of demo-container or container-fluid... one of it should do the deal for you.
height: 100% !important;
width: 100% !important;
Update
one of the harder challenges i have encountered, but add this to the style.css
and you have your contents dynamic inside its container.
.highcharts-background, .highcharts-root, .highcharts-container {
max-height: 100%;
max-width: 100%;
}
is this what you are looking for?
This was made using images of the graphs in the links you posted. I also used flexboxes which seems to be what you are looking for.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.container-fluid div {
width: auto;
border: 2px solid red;
min-width: 33%;
}
.container-fluid{
display: flex;
flex-wrap: wrap;
border: 2px solid blue;
justify-content: center;
}
<div class="container-fluid">
<div class="chartOne">
<img src="https://i.gyazo.com/161954d0841b7a398d5f0d63e1b2bcc4.png" alt="">
</div>
<div class="chartOne">
<img src="https://i.gyazo.com/161954d0841b7a398d5f0d63e1b2bcc4.png" alt="">
</div>
<div class="chartOne">
<img src="https://i.gyazo.com/161954d0841b7a398d5f0d63e1b2bcc4.png" alt="">
</div>
</div>
I'm using Bootstrap and am using the class col-md-6. On the left column I have an image and on the right column I have two paragraphs of text. When I shrink the web browser (or use mobile), I want the div to expand, instead of using a scroll bar. What ends up happening now is the image shows up fine but I have to use the scroll bar to see the paragraphs of text.
Sorry I'm kind of new to web programming and have spent a considerable amount of time trying to figure out what I'm doing wrong. Not sure if it's relevant but I'm also including the next chunk of code after the issue.
I want it to scroll from pg4 to pg5, but i don't want an additional scrollbar to have to see all the content in pg4.
EDIT: Also feel like I should note that I've seen similar questions posted here and have tried numerous of the answers to these issues and nothing has worked yet.
<div id="pg4">
<div class="container">
<h1 class="text-center text-uppercase">About Me</h1><hr/>
<div class="row">
<div class="col-md-6">
<img src="IMAGE" class="center-block img-responsive" id="picture" alt="Picture" />
</div>
<div class="col-md-6">
<p>PARAGRAPH 1</p>
<p>PARAGRAPH 2</p>
</div>
</div>
</div>
</div>
<div id="pg5">
</div>
/* PG 4 */
#pg4 {
background-color: #282E34;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
width: 100%;
height: 100%;
position: absolute;
display: block;
top: 250%;
overflow: auto;
}
#pg4 p {
color: white;
text-align: left;
font-size: 20px;
margin-left: 3%;
margin-right: 5%;
margin-bottom: 10%;
color: #6c6d6e;
}
#p1 {
margin-top: 15%;
}
#picture {
width: 45%;
margin-top: 15%;
}
/* PG 5 */
#pg5 {
background-image: url("IMAGE");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 100%;
width: 100%;
position: absolute;
top: 350%;
overflow: auto;
}
Try to add additional classes to your divs
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
<img src="IMAGE" class="center-block img-responsive" id="picture" alt="Picture" />
</div>
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
<p>PARAGRAPH 1</p>
<p>PARAGRAPH 2</p>
</div>
</div>
Something like this.
If you do not specify col-xs-? by default bootstrap stacked your divs and it behaves like col-xs-12. Same for large displays. So you need to specify a width for extra small and large displays
And from that part:
#picture {
width: 45%;
margin-top: 15%;
}
remove width: 45% you already defined img-responsive
When you set height and overflow: auto for an element, It means you want this element to be scrollable. If you don't want this, instead of height: 100% set height: auto;
h1 {
font-size: 36px;
}
h3 {
font-size: 24px;
}
.container {
max-width: 1115px;
margin: 0 auto;
}
.profile-pic {
margin-top: 3vh;
}
<header>
<div class="container">
<div class="row">
<div class="col-sm-6 profile-pic"><img class="img-responsive img-circle" src="image/setu.png" alt="Setu Shubham">
</div>
<h1 class="col-sm-6 text-right middle"> Abhi</h1>
<h3 class="profession text-right">FRONT-END</h3>
</div>
</header>
Hi everyone, I am using bootstrap, I want my image and h1 to be at at same row, image to be at extreme left and heading to be at extreme right when browser gets resized. When I am resizing image comes at top, and my heading goes down, which is not looking good.
problem i m facing is shown in image
If you want name and profession in a column on the right, you should put them in some container (not .container, just a new parent element) with the class .col-**-6.
In following example, I'm switching to -xs- for resolutions lesser than 768px. I also removed centering of .container because it's already done by BS afaik.
EDIT: working example in Bootply
Relevant documentation: Bootstrap 3.x Grid
.col-xs-6 {
outline: 1px dashed darkred;
}
h1 {
font-size: 36px;
}
h3 {
font-size: 24px;
}
.container {
max-width: 1115px;
/*margin: 0 auto; already applied by BS afaik*/
}
.profile-pic {
margin-top: 3vh;
}
<header>
<div class="container">
<div class="row">
<div class="col-xs-6 profile-pic"><img class="img-responsive img-circle" src="image/setu.png" alt="Setu Shubham">
</div>
<div class="col-xs-6">
<h1 class="text-right middle"> Abhi</h1>
<h3 class="profession text-right">FRONT-END</h3>
</div>
</div>
</header>
I am a bit stuck with my meager css skills. I have a bootstrap panel and a grid layout that contains 3 images in a single row.
My problem is that the images that I get from the webservice are all very different in size. some are HD quality and others are 80 X 80 pixels. I want to use css and make all three images appear the same size. The images must also be responsive since this is a mobile website. I found a solution that does what I want, but the stock browser on android does not support vw and vh. My current solution is as follows.
<div class="panel panel-default">
<div class="panel-heading text-center"><span class="colorText greenText21">Photo Gallery</span></div>
<div class="panel-body">
<div class="row text-center">
<div class="col-xs-4 text-center">
<img src="Images/c1.png" style="width: 21vw; height: 18vw" alt="Image" class="text-center" id="gallery_Image1" />
</div>
<div class="col-xs-4 text-center">
<img src="Images/c2.png" style="width: 21vw; height: 18vw; " alt="Image" class="text-center" id="gallery_Image2" />
</div>
<div class="col-xs-4 text-center">
<img src="Images/c3.png" style="width: 21vw; height: 18vw; " alt="Image" class="text-center" id="gallery_Image3" />
</div>
</div>
</div>
</div>
Is there a easy css cross browser solution that will allow me to get all three images to be the same size, whilst also being responsive ?
Thank you in advance for your help.
try to add this class on your img tag
.img-responsive
Boostrap 3 - Responsive images
Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.
Is is almost important (but not fundamental) that aspect ratio of different images is the same.
Anyway, use % instead of "vw", setting width to '100%' and height to 'auto' for IMG tags. They will be contain inside 'col-xs-4' containers.
I ran into this problem with twitter bootstrap not to long ago. I used this method as supplied by another users jsfiddle. It centers images of different sizes in a responsive container. I would still try to use PHP or some other server side code to resize images to a smaller size so you are not resizing a 3000px image down to 80px for example.
JSfiddle
.html
<div class="col-xs-4">
<div class="dummy"></div>
<div class="img-container">
<div class="centerer"></div>
<img src="/path/to/image" alt=""/>
</div>
</div>
.css
.dummy {
padding-top: 100%; /* forces 1:1 aspect ratio */
}
.img-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align:center; /* Align center inline elements */
font: 0/0 a;
}
.img-container .centerer {
display: inline-block;
vertical-align: middle;
height: 100%;
}
.img-container img {
vertical-align: middle;
display: inline-block;
max-height: 100%; /* <-- Set maximum height to 100% of its parent */
max-width: 100%; /* <-- Set maximum width to 100% of its parent */
}