I have two jpegs inside a flex container "header", images are stacked vertically, the top image is square, the bottom is a long horizontal rectangle.
I want the bottom image to shrink with window re-sizing.
I can't get it to work, having tried many solutions here in stack flow.
This is my first stack overflow post so please forgive me.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Clear Cut Legal Video</title>
<link rel="stylesheet" type="text/css" href="styles/stylesheet.css">
</head>
<body>
<div class="header">
<img src="images/CCLV.jpeg"
alt="Clear Cut Legal Logo">
<img id="tagline"
src="images/CCLV-tag-line.jpg"
alt="Clear Cut Legal Tag Line">
</div>
</body>
</html>
.header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-flow: column nowrap;
}
You can set the width and height properties for the images inside the .header class to make them flexible
.header {
display: flex;
flex-direction: column;
}
.header img {
width: 100%;
height: auto;
}
Here's a codepen
Related
So I am trying to make different texts next to specific symbols (in the elevator-pitch div) but somehow the element skip rows and text end up below the images. Ideally I want each text to be nicely aligned next to the images (hence making the float).
Here is the code: https://codepen.io/andreassoteriou/pen/PoaLBjv
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>AndreasSoteriouCV</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Dancing+Script&family=Merriweather&family=Montserrat&family=Pacifico&family=Playball&family=Playfair+Display&display=swap" rel="stylesheet">
</head>
<body>
<div class="top-container">
<img src="andreassoteriou-modified.png" alt="andreas">
<h1>Andreas Soteriou</h1>
<h2>aspiring web developer</h2>
</div>
<h1>My Story</h1>
<div class="elevator-pitch">
<img class="creativity-img" src="https://cdn-icons-png.flaticon.com/512/1126/1126453.png" alt="creativity">
<h2>Creativity</h2>
<p>Why I am creativfdfdfdfdfdfdfdwerv4vrtyvrtyvrtyvyrytve</p>
</div>
<hr>
<div class="elevator-pitch">
<img class="logical-img" src="https://cdn-icons-png.flaticon.com/128/1935/1935467.png" alt="logical">
<h2>Logical</h2>
<p>Why I am creativggggfgotjgirtgfdffdffdfdfdfdfdfd</p>
</div>
<div class="story-container">
</div>
</body>
</html>
body {
margin: 0;
font-family: 'Merriweather', serif;
text-align: center;
}
.top-container {
background-color: #F8EDE3;
margin: 0;
height: 450px;
padding-top: 60px;
}
.top-container > h1 {
margin-top:40px;
font-size: 40px;
}
.top-container > h2 {
font-family: 'Dancing script', serif;
font-size: 30px;
}
.middle-container {
}
.elevator-pitch {
width: 25%;
text-align: left;
line-height: 1.5;
margin: 50px auto 50px auto;
overflow:auto;
}
.creativity-img {
float: left;
margin-right: 20px;
width: 30%;
}
.logical-img {
float: right;
width: 30%;
margin-left: 20px;
any idea on how I should tackle this? Most importantly, very curious as to why this happens!
Best regards,
Andreas
I was expecting the text to be nicely aligned next to the image as in the udemy course I am doing now:
I have a page that looks like this
The width of the datetimepicker that you see on the picture cant get any smaller.
So what happends when the width is over 1200 px and under about 1550 px is that the datepicker goes outside of its place like this:
When the width is 1550 px or over the width is wide enough to fit the datetimepicker
And when the width is below 1200 the responsiveness kicks in and makes the page look good like this
So what i need help with is how to set for the responsiveness to kick in att 1550 instead of 1200. Is this possible, if yes how?
you can also fix overflow content like this
.button-container {
padding-left: 0;
list-style: none;
display: -webkit-box;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-box-align: baseline;
align-items: baseline;
margin-bottom: 30px;
}
.button-container {
max-width: 300px;
}
.button-wrapper {
background-color: lightblue;
flex-shrink: 0;
}
.button-wrapper button{
padding:5px 15px;
border-radius:5px;
border:1px solid #000;
margin:10px;
}
.button-container::-webkit-scrollbar {
width: 2px;
height:8px;
}
button-container::-webkit-scrollbar-track {
box-shadow: inset 0 0 2px grey;
border-radius: 0px;
}
.button-container::-webkit-scrollbar-thumb {
background: #ff9b51;
border-radius: 0px;
}
.button-container::-webkit-scrollbar-thumb:hover {
background: gray;
}
<!-- Meta View Port -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="button-container">
<div class="button-wrapper">
<button type="button" class="btn-default">Range</button>
<button type="button" class="btn-default">Week</button>
<button type="button" class="btn-default">Month</button>
<button type="button" class="btn-default">Quarter</button>
<button type="button" class="btn-default">Year</button>
</div>
</div>
You can easily add custom 'breakpoints' to your css in the form of a media query.
#media only screen and (max-width: 1550px) {
// type your styles here
// set your content to be vertically aligned
}
Let me know if this helps :)
I am creating a website about UFC and need help with my image positioning I have 3 images and want to place them in a horizontal arrangement across the screen but am having trouble doing this.I have created a div around each of the images to try and position them but cannot seem to get the result that I want, any help would be great.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="website.html">
<link rel="stylesheet" type="text/css" href="topfightercss.css">
<h1><u>Top Fighters</u></h1>
</head>
<body>
<div id="demetrious">
<img src="dem.png" alt="Demetrious Johnson"> <p> Demetrious Johnson is the
rank 1 pound for pound fighter in UFC,<br>he is from Kentucky USA and is
aged 31 and stands at 5'3 (160cm)<br>he weights 56kg (125lb) and has a reach
of 66" with a leg reach of 34".<br>He has a record of 27 wins 2 losses and 1
draw and is the curent<br> flyweight champion. </p>
</div>
<div id="connor">
<img scr="connor.png" alt="Connor Mcgegor">
</div>
<div id="daniel">
<img scr="daniel.png" alt="Daniel Cormier">
</div>
</body>
</html>
CSS
html {
background: url(pg2background.jpg);
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
h1 {
color: aqua;
text-align: center;
font-size:24pt;
}
.demetrious {
position: relative;
top: 8px;
left: 12px;
width: 450px;
height: 300px;
opacity: 0.3;
}
p {
color: aliceblue;
}
.connor {
position: center;
top: 8px;
right:12px;
}
.daniel {
position: relative;
}
You can set up a container div with class .container with a fixed width of x pixels, x = 3 * image width, because you have three images. Only use this if you want the images to stay horizontally aligned when the browser window is smaller than the width of 3x
.container{
width: x px;
}
Then give a shared class to your image divs, let's call it .imgClass. Now turn them to float;
.imgClass{
float:left;
}
EDIT: This means your topfightercss.css css file should include something like this:
.container{
width: 300 px; //Three times 100px = 300px
}
.imgClass{
float:left;
width: 100px; //All pictures are 100px wide. Not required.
}
And your html file:
<div class="container">
<div class="imgClass"> <img><p>...</p> </div> <!-- demetrious -->
<div class="imgClass"> <img><p>...</p> </div> <!-- connor -->
<div class="imgClass"> <img><p>...</p> </div> <!-- daniel -->
</div>
I have a strange situation with an image and a section. You can download html, css and img1 from my github
The situation: I have a section tag which has padding:15px from all sides. In the section I have an img, floated left, then a p and a span with two buttons. The section has also a border and margin:35px
My problem: The image doesn't respect the section's bottom padding and goes through the sections bottom border.
I tried to put the img in a div inside the section, and also tried to give a height value for the section and 100% for the image's height but it didn't change anything
What is the best solution for this problem, so that the picture takes all the height of the section respecting the section's top, left and bottom paddings?
In the github, one step back, is a ppt-file TASKS.ppt. The third slide is what I try to achieve.
EDIT: Since code is requested, here it is:
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Music categories</title>
<link href="Ex03MusicCategories.css" rel="stylesheet" />
</head>
<body>
<header>
<h1>Music Categories</h1>
</header>
<section>
<img src="img1.png" />
<div>
<p>Even more websites all about website templates on <span>Just Web Templates</span> .</p>
<span>
<input type="button" value="Listen" />
<input type="button" value="Add" />
</span>
</div>
</section>
</body>
</html>
CSS:
body {
background-color: #EEE;
padding-top: 14px;
padding-left: 12px;
padding-right: 8px;
padding-bottom: 25px;
}
body header h1 {
font-weight: lighter;
font-size: 1.5em;
font-family: Arial;
letter-spacing: -2px;
}
section {
border-style: solid;
border-color: #989898;
border-width: 2px;
padding: 15px;
margin: 35px 0px;
}
section img {
float: left;
}
section img:after {
clear: both;
}
image img1.png
This is a classic, search for clearfix. One possible solution is
section {
overflow: hidden;
}
See JSFiddle
Update:
There's an article about CSS float and clear at CSS-Tricks - All About Floats.
Essentially, you need clear, when
an element should stay below a floated element
and some clearfix, when
the parent of a floated element collapses and you want the parent wrap around/include the floated children
You can also look at Stackoverflow css-float tag wiki (an alias of css-clear) or clearfix
So I plan on making this really long image, its small right now, but I increased the height out to how long I expected it to be. Here's my code so far:
<!doctype html>
<meta charset="utf-8">
<head>
<style>
body {background-color: black}
.image {background-image: url('http://i.imgur.com/JrsEkO9.jpg');
width: 640px;
height: 25000px;
position: absolute;
left: 50%;
top: 40%;
margin:-228px 0 0 -400px;
repeat-x: no;
-webkit-background-size: 640px 25000px;
min-width: 640px;
min-height: 25000px;}
</style>
</head>
<html>
<body>
<div class="image">
</div>
</html>
</body>
It looks like I was hoping it would on a desktop, but when opened on an ipad the image is fuzzy. Any suggestions? Here's a link to see the problem: http://bit.ly/HrG9oc