Within a single-column CSS grid, I have a div running a js slideshow that sits atop a second div. When I scale the site down, those two divs pull away from each other. I would like to be able to maintain a constant distance between the two divs, but I can't get that to work. The div classes in question are "slides" and "centertext".
Here's a link to the site at codepen
Thank you for any help.
Here's the HTML
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html"; charset="utf-8" />
<meta name="created" content="Fri, 22 Jan 2016 17:43:40 GMT" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="jvs_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrap">
<div class="maingrid">
<div class="slides">
<img src="http://tests.markgarvey.com/slideshow_images/out1.png" max-width:100%;>
<img src="http://tests.markgarvey.com/slideshow_images/out2.png" max-width:100%;>
<img src="http://tests.markgarvey.com/slideshow_images/out3.png">
<img src="http://tests.markgarvey.com/slideshow_images/out4.png">
<img src="http://tests.markgarvey.com/slideshow_images/out5.png">
<img src="http://tests.markgarvey.com/slideshow_images/out6.png">
<img src="http://tests.markgarvey.com/slideshow_images/out7.png">
<img src="http://tests.markgarvey.com/slideshow_images/out8.png">
<img src="http://tests.markgarvey.com/slideshow_images/out9.png">
<img src="http://tests.markgarvey.com/slideshow_images/out10.png">
</div><!-- end of slides div -->
<div class="centertext">
<img src="http://tests.markgarvey.com/images/JVSA_weblogo3.png" width="281" height="106" alt="" title="" border="0" />
<p class="name">FIRSTNAME LASTNAME</p>
<p class="address">1234 Example Street<br>
Princeton, New Jersey 12345<br>
testing#email.net<br>
505.422.6563</p>
<p>Solemnly he came forward and mounted the round gunrest. He faced about and blessed gravely thrice the tower, the surrounding country and the awaking mountains. Then, catching sight of Stephen Dedalus, he bent towards him and made rapid crosses in the air, gurgling in his throat and shaking his head. Stephen Dedalus, displeased and sleepy, leaned his arms on the top of the staircase and looked coldly at the shaking gurgling face that blessed him, equine in its length, and at the light untonsured hair, grained and hued like pale oak.
</p>
</div><!-- end of centertext div -->
</div><!-- end of maingrid div -->
</div><!-- end of wrap div -->
<script>
function nextSlide() {
var q = function(sel) { return document.querySelector(sel); }
q(".slides").appendChild(q(".slides img:first-child"));
}
setInterval(nextSlide, 5000)
</script>
</body>
</html>
And here's the CSS
#wrap {
max-width:100%;
width:1000px;
background:#FFF;
margin: 0 auto;
}
.maingrid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
align-items: center;
justify-items: center;
margin-top:50px;
}
.centertext {
align-self: center;
justify-self: center;
margin-top:20px;
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
text-align:left;
letter-spacing: normal;
line-height: 19px;
padding-bottom: 5px;
font-family: Verdana, Arial, sans-serif;
color:#000000;
font-size:1em;
line-height: 20px;
}
img {
max-width: 100%;
height: auto;
}
.name {
font-size:1.5em;
font-weight:bold;
font-variant:small-caps;
margin-bottom: 5px;
}
.address {
margin-top: 8px;
line-height: 24px;
font-family: Arial, sans-serif;
color:#000000;
font-size:1em;
line-height: 19px;
}
/* the slide container with a fixed size */
.slides {
width:100%;
max-width: 1000px;
height: 670px;
position: relative;
}
/* the images are positioned absolutely to stack. opacity transitions are animated. */
.slides img {
height: auto;
display: block;
position: absolute;
transition: opacity 1s;
opacity: 0;
width:100%;
max-width: 1000px;
margin-bottom:60px;
}
/* the first image is the current slide. it's faded in. */
.slides img:first-child {
z-index: 2; /* frontmost */
opacity: 1;
}
/* the last image is the previous slide. it's behind the current slide and it's faded over. */
.slides img:last-child {
z-index: 1; /* behind current slide */
opacity: 1;
}
The issue is to do with the fixed height on the .slides div. As you zoom in the width of the visible image is not allowed to overflow the page width, so eventually the .slides div contains significant white-space at the bottom.
It can be fixed by changing
.slides img {
...
width:100%;
max-width: 1000px;
...
}
to
.slides img {
...
width: 1000px;
...
}
Assuming that does not impact some other behaviour (looks fine to me in chrome on your CodePen demo)
Related
I'm laying out the layout Figma Layout. This page has a background image and additional
Background
Additional - logo
and a hamburger
There is html code of the page
:root {
--my-screenwidth: 1366px;
--my-screenheight: 768px;
--layout-screenwidth: 1441px;
--layout-screenheight: 811px;
}
._container {
--layout-containerwidth: 1111px;
--layout-containerheight: 43px;
max-width: calc((var(--layout-containerwidth)/var(--layout-screenwidth))*var(--my-screenwidth));
margin: 0px auto;
box-sizing: content-box;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="https://fonts.googleapis.com/css?family=Poppins:regular,700&display=swap" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Webovio</title>
</head>
<body>
<div class="wrapper">
<main class="page">
<div class="page__main-block main-block">
<div class="main-block__container _container">
<div class="margin-block__header">
<div class="main-block__nav">
<!--
<img src="img/triangles/white-triangle.png" class="main-block__logo_white_triangle" alt="logoheader">
<img src="img/triangles/yellow-triangle.png" class="main-block__logo_yellow_triangle" alt="logoheader">
-->
<!--<div class="main-block__header_image_1">-->
<img src="https://i.stack.imgur.com/oB0ua.png" class="main-block__logo_name" alt="logoname">
<!--</div>-->
<!--<div class="main-block__header_image_2"></div>-->
<img src="https://i.stack.imgur.com/hO056.png" class="main-block__logo_hamburger_icon" alt="menulogo">
<!--</div>-->
</div>
</div>
<div class="main-block__body">
<div class="main-block__smalltitle">A place where</div>
<div class="main-block__title">A creative agency for redemptive brands</div>
<!--
<div class="main-block__text">
Anteelo is a leading strategic design firm that builds powerful digital solutions for startups and enterprises.
</div>
-->
<div class="main-block__items">
<!--Get in touch link-->
</div>
</div>
</div>
<div class="main-block__image _ibg">
<img src="https://i.stack.imgur.com/Tju6g.png" alt="cover">
</div>
</div>
</main>
</div>
</body>
</html>
The css contains the dimensions of the header containing the logo and the hamburger. Here is the max-width: calc((var(--layout-containerwidth)/var(--layout-screenwidth))*var(--my-screenwidth)); which calculates the maximum width of the header given the width values my screen and the layout screen, as well as the width of the header on the layout, taken from the figma layout (the header consists of a logo and a hamburger).
Tell me how to layout the layout so that so that the logo and the hamburger in the header take their places on the background image, and so that the text (headings A place where and A creative agency for redemptive brands) becomes left horizontally and in the middle vertically of the image, and also to be able to proportionally scale the background image as in Proportional scaling tools. It should be like on Layout from Figma. I tried to style but couldn't get the text, logo and hamburger on the background image.
P.S. Exact indents are not needed. Tell me how to layout so that the background image has the content of the page, including text, logo and hamburger.
Section is set to be height: 100vh; width: 100vw and then display: grid.
The background image will always fill it's container and you can control the image cropping by adding style="--imgPosition: <X> <Y>", which is just laying out to object-position so you can check MDN for potential values.
Content in the main block is using display: grid as well and all set to occupy the same space. The links have an explicit z-index set so they will be above the content. The content will always be vertically centered unless it has more content than screen height, at which point padding: 6rem 0 will add 6rem above and below the section
*, *::before, *::after { box-sizing: border-box } body { color: white; font: 16px "Poppins", sans-serif; margin: 0 }
section.custom {
display: grid;
height: 100vh; width: 100vw;
place-items: center;
}
section.custom > * {
grid-area: 1/1/-1/-1;
height: 100%; width: 100%;
}
section.custom .back { position: relative }
section.custom .back > * {
display: block;
height: 100%; width: 100%;
object-fit: cover;
object-position: var(--imgPosition, center center);
position: absolute;
}
section.custom .fore {
display: grid;
gap: 1rem;
max-width: 1200px;
padding: 1rem;
place-items: center;
z-index: 1;
}
section.custom .fore > * { grid-area: 1/1/-1/-1 }
section.custom .fore .navLink { align-self: start; z-index: 1 }
section.custom .fore #logo { justify-self: start }
section.custom .fore #menuToggle { justify-self: end }
section.custom .fore .block { padding: 6rem 0; width: 100% }
<link href="https://fonts.googleapis.com/css?family=Poppins:regular,700&display=swap" rel="stylesheet" />
<section class="custom">
<div class="back" style="--imgPosition: top left"><img src="https://i.stack.imgur.com/Tju6g.png"></div>
<div class="fore">
<a class="navLink" id="logo" href="#"><img src="https://i.stack.imgur.com/oB0ua.png"></a>
<a class="navLink" id="menuToggle" href="#"><img src="https://i.stack.imgur.com/hO056.png"></a>
<div class="block">
<p>A place where</p>
<h1>A creative agency for redemptive brands</h1>
<p>Anteelo is a leading strategic design firm that builds powerful digital solutions for startups and enterprises.</p>
</div>
</div>
</section>
I've created a carousel of images inside of a flexbox, and given each of them a width of 200px. I'd like the images to resize at the same rate when I shrink the window, so I gave them each a flex-shrink value of 1.
However, as you can see from the gif, only the second image resizes when I shrink the window (the others stay the same width). I checked the original file sizes and noticed that the second image also has the smallest width (so I assume this could be causing the issue?)
However, I'm not exactly sure how to fix this. Any help would be appreciated.
Html
<!DOCTYPE html>
<html lang="en">
<head>
<title>your page title goes here</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="container">
<h1>My Photo Gallery</h1>
<div class="gallery">
<figure>
<img src="img/dog1.jpeg" alt="first dog">
<figcaption>Example Photo</figcaption>
</figure>
<div class="slider">
<img src="img/dog2.jpeg" alt="second dog"/>
<img src="img/dog3.jpeg" alt="third dog"/>
<img src="img/dog4.jpeg" alt="fourth dog"/>
<img src="img/dog5.jpeg" alt="fifth dog"/>
</div>
</div>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
body {
background-color: rgb(46, 46, 46)
}
h1 {
font-family: helvetica;
color: white;
}
.container {
padding: 30px 20px;
text-align: center;
max-width: 1000px;
min-width: 500px;
background-color: rgb(66, 66, 66);
margin: 0 auto;
}
figure {
text-align: left;
}
figcaption {
color: white;
}
img {
width: 100%;
}
.gallery {
display: flex;
flex-flow: column;
}
.slider{
margin-top: 32px;
display: flex;
justify-content: space-between;
}
.slider img {
display: block;
width: 200px;
max-height: 200px;
object-fit: cover;
flex-shrink: 1;
}
In this case if you don't want to add any extra markup just replace width:200px; in .slider img to min-width:200px;.
If you want to maintain a completely fluid layout you could replace min-width:200px; with something like min-width:25%.
As I mentioned in my other answer if you're willing to add a container to each of these images you'll have a bit more control as you can make the image expand to fill the container, regardless of what its dimensions are.
Try using a media query
example:
#media(max-width:700px){
.slider img {
width: 100px;
height: auto;
}
}
I'm trying to make a layout like on the picture but I'm struggling with canvas positioning. How can I put h1 forward?
Also, whats better for the black and white skewed rectangles? To do them with CSS or another Canvas on top of the first one?
Also I would appreciate some advice on responsiveness of this layout.
body {
font-family: 'Roboto', sans-serif;
background-color: #181818;
padding:0;
margin:0;
}
p{
color: #f0f0f0;
}
h1 {
text-align: center;
text-align: left;
font-size: 10em;
}
h2 {
text-align: center;
margin: 40px 0px;
color: #f0f0f0;
}
td{
width: 50%;
text-align: center;
}
canvas{
width:100%; height:100%;
position:absolute; top:0px; left:0px;
background-image: linear-gradient(to bottom right, red, #380000);
z-index: 0;
}
.homepage .portfolioPage{
position: absolute;
z-index: 1;
}
/* .mainWrapper {
position: relative;
} */
.mainPage{
margin-top: 50px;
display: inline-block;
align-content: center;
}
.rightbox{
padding: 0 40%;
width: 600px
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- Font -->
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght#700&family=Roboto&display=swap" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="style.css">
<title> </title>
</head>
<body>
<div class="mainWrapper">
<canvas id="#particles-js" width="1000" height="500"></canvas>
<!-- Homepage -->
<div class='homepage'>
<table style="width:100%">
<tr>
<!-- Left Side -->
<td>
<div class='mainPage'>
<div class="blk-box">
<div class="block">
<h1>Barqawi</h1>
</div>
<div class="block">
<h1>Maroun</h1>
</div>
<div class="block">
<h1>Grey</h1>
</div>
</div>
</div>
</td>
<!-- Right Side -->
<td>
<div class='mainPage'>
<div class="rightbox">
<p id="jrdev">Jr Software Developer</p>
<div class="portfolioBtn">
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
</body>
I figured out. Just in case someone need it, here is the code.
canvas {
width:100%; height:50%;
top:0px; left:0px;
background-image: linear-gradient(to bottom right, red, #380000);
position: absolute;
z-index: -1;
}
.mainWrapper {
position: relative;
}
.homepage {
position: relative;
}
The tag
<h1>
is normally reserved for SEO keywords. Anyway, you can do the following:
.block { transform: skewX(-10deg);}
If you don't want the text to be skewed along, you should define another element outside to contain the text and then use negative margin or absolute positioning to fix the position of the text.
As for mobile reponsiveness, I would advise converting all absolute lengths to relative lengths, eg. 100%, 100vh, 100vw etc.
You can also use media queries to specify separate layouts for portrait and landscape orientations:
#media only screen and (orientation: portrait) {
body {
...
}
...
}
#media only screen and (orientation: landscape) {
body {
...
}
...
}
I am trying to put the input textfield inside my image. I already put my code inside my flexbox however the flexbox is working and responsive but when i do try to put the textfield inside the image. Its not working.The problem is even i try to make the input position to relative its still not display inside the image and not responsive. Can someone help me
body {
background-image: url(images/loading_bg.png);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color:#464646;
}
.box {
width:80%;
min-height:80vh;
margin:auto;
border:1px solid;
display: flex;
align-items: center;
justify-content: center; /* not really needed with auto margin on img*/
margin-top: -80px;
}
.box input {
position:relative;
width: 20%;
height: auto; /* maintain aspect ratio*/
margin: auto; /*optional centering of image*/
margin-left: 50%;
}
.box img {
position: relative;
display: block;
width: 80%;
min-width:100px;
max-width: 450px; /*actual image width*/
height: auto; /* maintain aspect ratio*/
margin: auto; /*optional centering of image*/
}
/* For mobile devices */
#media only screen and (max-width: 767px) {
body {
/* The file size of this background image is 93% smaller
* to improve page load speed on mobile internet connections */
background-image: url(images/loading_bg.png);
}
}
<!-- Tutorial URL: http://sixrevisions.com/css/responsive-background-image/
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Responsive Full Background Image</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="Six Revisions">
<meta name="description" content="How to use the CSS background-size
property to make an image fully span the entire viewport.">
<link rel="icon" href="http://sixrevisions.com/favicon.ico"
type="image/x-icon" />
<link href="http://fonts.googleapis.com/css?
family=Kotta+One|Cantarell:400,700" rel="stylesheet" type="text/css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<link rel="stylesheet" href="presentational-only/presentational-
only.css">
<link rel="stylesheet" href="responsive-full-background-image.css">
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="presentational-only/presentational-only.js"></script>
</head>
<body>
<header class="container">
<section class="content">
<div class="box">
<input type="text" name="name" placeholder="name">
<img src="http://via.placeholder.com/350x250" width="350"
height="250" alt="missing image">
</div>
<p><a class="button" id="load-more-content" href="#top">Load some
content</a></p>
</section>
</header>
</body>
</html>
Is this what you're looking for??.. i have put image and input in 1 div .outer.
Made it position relative and and the input absolute and adjusted it accordingly.
thanks
body {
background-image: url(images/loading_bg.png);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color:#464646;
}
.box {
width:80%;
min-height:80vh;
margin:auto;
border:1px solid;
display: flex;
align-items: center;
justify-content: center; /* not really needed with auto margin on img*/
/* margin-top: -80px; */
}
.box input {
position: absolute;
width: 20%;
height: auto;
margin: auto;
/* margin-left: 50%; */
z-index: 1;
top: 50%;
left: 0;
transform: translatey(-50%);
}
.box img {
position: relative;
display: block;
width: 80%;
min-width: 100px;
max-width: 450px;
height: auto;
/* margin: auto; */
}
.outer{
position: relative;
width: 350px;
margin: auto;}
/* For mobile devices */
#media only screen and (max-width: 767px) {
body {
/* The file size of this background image is 93% smaller
* to improve page load speed on mobile internet connections */
background-image: url(images/loading_bg.png);
}
}
<!-- Tutorial URL: http://sixrevisions.com/css/responsive-background-image/
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Responsive Full Background Image</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="Six Revisions">
<meta name="description" content="How to use the CSS background-size
property to make an image fully span the entire viewport.">
<link rel="icon" href="http://sixrevisions.com/favicon.ico"
type="image/x-icon" />
<link href="http://fonts.googleapis.com/css?
family=Kotta+One|Cantarell:400,700" rel="stylesheet" type="text/css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<link rel="stylesheet" href="presentational-only/presentational-
only.css">
<link rel="stylesheet" href="responsive-full-background-image.css">
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="presentational-only/presentational-only.js"></script>
</head>
<body>
<header class="container">
<section class="content">
<div class="box">
<div class="outer">
<input type="text" name="name" placeholder="name">
<img src="http://via.placeholder.com/350x250" width="350"
height="250" alt="missing image">
</div>
</div>
<p><a class="button" id="load-more-content" href="#top">Load some
content</a></p>
</section>
</header>
</body>
</html>
I tried creating a container with text. However my text kept getting squeeze when i minimize my browser tab. How do i make the text remain the same even when minimized?
<!DOCTYPE html>
<html>
<head>
<title>Savana - About</title>
<meta charset="utf-8" />
<style>
body {
font-family: 'Open sans', sans-serif;
}
.container-a {
width: 100%;
height: 400px;
background-color: #ffd800;
}
.container-a h1 {
margin: 0;
text-align: center;
position: relative;
top: 100px;
}
</style>
<body>
<div class="container-a">
<h1>
impeccable craftsmanship<br />
ridiculously comfy shoes<br /> transformative impact
</h1>
</div>
</body>
</html>
You can do like these, it's proper way.
<div class="container-a" style=" resize: none;">
<h1>
impeccable craftsmanship<br />
ridiculously comfy shoes<br /> transformative impact
</h1>
</div>
The container is re-sizing as you adjust the window. You can help prevent this a few ways, for example like adding a min-width to your container so when it hits a certain size it will no longer get smaller.
<!DOCTYPE html>
<html>
<head>
<title>Savana - About</title>
<meta charset="utf-8" />
<style>
body {
font-family: 'Open sans', sans-serif;
}
.container-a {
width: 100%;
height: 400px;
background-color: #ffd800;
/* Added min width for your container here */
min-width: 950px;
}
.container-a h1 {
margin: 0;
text-align: center;
position: relative;
top: 100px;
}
</style>
<body>
<div class="container-a">
<h1>
impeccable craftsmanship<br />
ridiculously comfy shoes<br /> transformative impact
</h1>
</div>
</body>
</html>