I'm trying to learn HTML/CSS and working on a nav bar, however, I am experiencing a scaling problem. This is the website in full screen.
This is the website minimized a bit.
Then this is the website minimized all the way.
As you can tell when I scale the website around into different scales then the proportions mess up and things begin to overlap. I have tried making the children absolute while keeping the containers relative. I am also using em's for measurement and not using pixels. What can I do to keep everything proportional while scaling?
This is the js fiddle
https://jsfiddle.net/2w1r136j/2/
HTML
<div class="container">
<header>
<nav>
<img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Westworld_Logo.svg/2000px-Westworld_Logo.svg.png" alt="logo">
<div class="leftNavContainer">
Home
Story
</div>
<div class="rightNavContainer">
Characters
Create
</div>
</nav>
</header>
</div>
CSS
* {
box-sizing: border-box;
}
body {
margin: 0;
background: #222;
font-size: 1em;
}
.container {
width: 100%;
height: 100%;
position: absolute;
}
header {
background: white;
height: 3.5em;
}
.logo {
height: 4.5em;
width: 4.5em;
position: absolute;
left: 50%;
margin-left: -50px !important; /* 50% of your logo width */
display: block;
margin-top: 0;
}
.leftNavContainer {
position: absolute;
float: left;
}
.leftNavContainer a {
position: relative;
display: inline;
margin-right: 2em;
margin-left: 2em;
}
.rightNavContainer {
float: right;
}
.rightNavContainer a {
position: relative;
display: inline;
margin-right: 2em;
margin-left: 2em;
}
Well Media queries might work, but a much better implementation would be using Flexbox or better CSS Grid.
I've updated the fiddle with a flexbox implementation.
https://jsfiddle.net/khpv2azq/3/
HTML
<head>
<title>
Westworld
</title>
<link rel="stylesheet" href="css/style.css">
</head>
<div class="container">
<header>
<nav>
<div class="leftNavContainer">
Home
Story
</div>
<img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Westworld_Logo.svg/2000px-Westworld_Logo.svg.png" alt="logo">
<div class="rightNavContainer">
Characters
Create
</div>
</nav>
</header>
</div>
CSS
* {
box-sizing: border-box;
}
body {
margin: 0;
background: #222;
font-size: 1em;
}
nav{
display: flex;
justify-content: space-between;
}
.container {
width: 100%;
height: 100%;
}
header {
background: white;
height: 3.5em;
}
.logo {
height: 4.5em;
width: 4.5em;
position: absolute;
left: 50%;
margin-left: -50px !important;
/* 50% of your logo width */
display: block;
margin-top: 0;
}
.leftNavContainer {
}
.leftNavContainer a {
position: relative;
display: inline;
margin: 4px;
}
.rightNavContainer {
}
.rightNavContainer a {
position: relative;
display: inline;
margin: 4px;
}
Also MDN resource for Flex box -
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
Hope this help! 😇
You can use media queries to change sizes at breakpoints
ex:
#media only screen and (max-width: 600px) {
body {
font-size: .7em;
}
}
https://jsfiddle.net/2w1r136j/7/
However, you might consider using the media queries to incorporate a responsive design which will work for mobile.
A common idiom is to collapse the menu items into full width elements, and to bump up the font size.
something like: https://jsfiddle.net/2w1r136j/40/
Related
Im trying to position this image and tittle with text on my website.
How can I make it responsive so that the scale doesnt change on different devices and everything stays at the same position.
Im new at this, so im probably making a lot of mistakes.
div.content {
width: 100vw;
display: flex;
}
div.column1 {
width: 15%;
background-color: #F7F7F7;
overflow: hidden;
height: 100vh;
}
div.column2 {
width: 70%;
overflow: hidden;
}
.lobby {
width: 45%;
height: 45%;
padding-top: 5.6rem;
padding-left: 1rem;
}
.title {
padding-top: 4.7rem;
display: inline-block;
float: right;
width: 50%;
font-size: 1.8rem;
}
.descr {
display: inline-block;
width: 30vw;
float: right;
font-size: 1rem;
padding-top: 0.4rem;
}
<div class="content">
<div class="column1">
</div>
<div class="column2">
<div class="title">Installations
<p class="descr"> We are a gym based in Carballo, A Coruña, counting with an installation </p>
</div>
<img class="lobby" src="img/lobby.jpg" alt="photo of the lobby of the gym" />
</div>
</div>
<div class="column1">
</div>
As you can see im trying to position the image and the text on the middle row of my website, since it is divided into 3 columns.
Anything I can do to improve the code and to make it more responsive.
Thanks!
You don't need 3 columns. My approach starts defining the wrapper layout (the container), then working on the content layout (2 columns nested on the wrapper).
Here is my way of doing it:
HTML
<div class="main-container container">
<div class="inner-container content">
<div class="column-left column column-1">
<img class="lobby" src="https://upload.wikimedia.org/wikipedia/en/c/cb/Placeholder_logo.png" alt="photo of the lobby of the gym">
</div>
<div class="column-right column column-2">
<h1 class="title">Installations</h1>
<p class="descr">We are a gym based in Carballo, A Coruña, counting with an installation </p>
</div>
</div>
</div>
CSS
<style>
html,
body {
padding: 0px;
margin: 0px;
}
/* set the layout */
.main-container {
width: 100%;
max-width: 100vw;
min-height: 100vh;
box-sizing: border-box;
padding-left: 15%;
padding-right: 15%;
position: relative;
}
/* this is a pseudo element, it renders the grey background on the left */
.main-container:before {
content: "";
display: block;
height: 100%;
background-color: #F7F7F7;
/* same width of padding-left as it covers only the left side */
width: 15%;
position: absolute;
z-index: 1000;
top: 0;
left: 0;
}
.inner-container {
width: 100%;
display: flex;
flex-wrap: wrap;
padding: 2rem 1rem 0;
box-sizing: border-box;
}
.column {
padding: 3.6rem 0 1rem;
box-sizing: border-box;
/* Column width - Change this with media Queryes */
width: 50%;
flex-basis: 50%;
}
/* page elements*/
.title {
font-size: 1.8rem;
margin-top: 0px;
}
.descr {
font-size: 1rem;
padding-left: 3rem;
}
.lobby {
width: 45%;
height: auto;
}
/* responsive media query */
/* decide the breakpoint to start having 1 column */
#media screen and (max-width: 767px) {
.column {
width: 100% !important;
flex-basis: 100%;
}
}
</style>
Here is a working Codepen: https://codepen.io/Davevvave/pen/BaPZRbb
Consider the #Sfili_81 advice, first study and learn about #media_queries (https://www.w3schools.com/css/css3_mediaqueries_ex.asp), avoid float, and
(I suggest) try to understand the natural behavior of HTML rendering flux, the semantic meaning of HTML tags and empower all with CSS.
How do I stack images on bg-image exactly like this using html there is a navbar and logo on the BG as well
i tried something like this
// clearfix
.image-stack::after {
content: ' ';
display: table;
clear: both;
}
.image-stack__item--top {
float: left;
width: 66%;
margin-right: -100%;
padding-top: 15%; // arbitrary
position: relative;
z-index: 1;
}
.image-stack__item--bottom {
float: right;
width: 75%;
}
it didnt work as anticipated
enter image description here
There are many ways to approach this.
But first you need to understand
CSS Positioning, CSS Layout (Using Grid / FlexBox / Float, etc ) & CSS BoxModel.
So based on the snippet you posted, I am going with float, but I would have recommended flex as it's powerful and flexible.
Below is what I came up with.
/* USING MOBILE-FIRST APPROACH, I.E DEFINING CSS FOR MOBILE FIRST */
body {
padding: 0;
margin: 0;
font-family: sans-serif;
}
/* Will serve as container */
.image-stack {
position: relative;
}
.image-stack .bg {
position: absolute;
height: 100%;
width: 100%;
/* overlay-color */
background: black;
}
.image-stack .bg>img {
opacity: .75;
width: 100%;
height: 100%;
object-fit: cover;
}
/* will serve as row */
.image-stack .image-stack__item {
position: relative;
padding: 20px 10px;
height: 100%;
}
.col-half {
padding: 0 10px;
position: relative;
height: 100%;
}
.text-format {
color: white;
margin-bottom: 30px;
}
.text-format h1 {
font-size: 3rem;
font-weight: 700;
margin: 5px 0;
}
.img-overlap {
width: 100%;
height: 100%;
object-fit: cover;
}
/* RESPONSIVE CSS FOR BIG DEVICES */
#media screen and (min-width: 768px) {
.image-stack {
background: yellow;
/* height must be set in vh, px, rem, em */
height: 80vh;
margin-bottom: 60px;
}
.col-half {
/* SINCE WE ARE NOT USING `box-sizing: border-box` WE HAVE TO REMOVE THE LEFT AND RIGHT PADDING WE GIVE FROM MOBILE CSS = (20PX) FROM THE WIDTH */
width: calc(50% - 20px);
float: left;
}
.text-format {
margin-bottom: 0px;
}
.img-overlap {
position: absolute;
left: 0;
bottom: -30px;
}
}
<div class="image-stack">
<div class="bg">
<img src="https://picsum.photos/id/1045/1440/400">
</div>
<div class="image-stack__item">
<div class="col-half text-format">
<p>5th Consistent Award Winning Year!</p>
<h1>Modern Design Solutions</h1>
<p>A descriptive paragraph that tells clients how good you are and proves that you are the best choice.</p>
<p>A descriptive paragraph that tells clients how good you are and proves that you are the best choice.</p>
See our Projects
</div>
<div class="col-half">
<img src="https://picsum.photos/id/1008/600/400" class="img-overlap" alt="Overlapping Image" />
</div>
<!-- Notice Break that I used to clear float -->
<br clear="both" />
</div>
</div>
<div style="background: brown">
Other test
</div>
I added comments in the css section to guide you.
CodePen Link => https://jsfiddle.net/d5urpbL2/17/
This is only happening in Chrome, not Firefox or IE -
I have three images with text overlayed. The three images are responsive, and take up the full width of the browser window. Here's a screenshot:
When I resize the window to make it narrower, somehow, the html is becoming smaller than the size of the page. For example, here:
This only happens very quickly before the window seems to readjust, and everything is fine. However, I'd still like to fix it.
I've tried using a flexbox footer instead of the vh method but that didn't help.
My HTML and CSS are below. A note about the HTML - I'm sure there is another way to get the three pictures to fit together without any whitespace besides cramming the HTML all together like it is - sorry for being a hack. But that's not the source of the problem, as far as I can tell - it happens when there is only one picture as well.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<link href="styles/index-footer-test-750.css" type="text/css" rel="stylesheet">
<title>Good Boy Dog Care</title>
</head>
<body>
<div class="index-content">
<div id="we-love-dogs-one"><img id="we-love-dogs-one-image" src="images/cute-dog-one-cropped.jpg"><div id="we-love-dogs-one-text"><p>WE</p></div></div><div id="we-love-dogs-two"><img id="we-love-dogs-two-image" src="images/cute-dog-two-cropped.jpg"><div id="we-love-dogs-two-text"><p>LOVE</p></div></div><div id="we-love-dogs-three"><img id="we-love-dogs-three-image" src="images/cute-dog-three-cropped.jpeg"><div id="we-love-dogs-three-text"><p>DOGS</p></div></div>
</div>
<div class="footer">
</div>
</body>
</html>
And CSS:
* {
box-sizing: border-box;
margin: 0;
}
.index-content {
min-height: calc(100vh - 2em);
padding: 0;
margin: 0;
}
.footer {
height: 2em;
background-color: rgba(240, 100, 60, 1);
width: 100%;
cursor: default;
}
#we-love-dogs-one {
width: 34%;
display: inline-block;
margin: 0;
position: relative;
text-align: center;
}
#we-love-dogs-one-image {
width: 100%;
height: auto;
display: block;
float: left;
}
#we-love-dogs-one-text {
left: 0;
position: absolute;
width: 100%;
color: white;
top: calc(50% - 17px);
font-size: 1.5em;
display: inline-block;
font-family: "Montserrat";
}
#we-love-dogs-two {
width: 33%;
display: inline-block;
margin: 0;
position: relative;
text-align: center;
font-family: "Montserrat";
}
#we-love-dogs-two-image {
width: 100%;
height: auto;
display: block;
float: left;
}
#we-love-dogs-two-text {
left: 0;
position: absolute;
width: 100%;
color: white;
top: calc(50% - 24.5px);
font-size: 2em;
display: inline-block;
font-family: "Montserrat";
}
#we-love-dogs-three {
width: 33%;
display: inline-block;
margin: 0;
position: relative;
text-align: center;
}
#we-love-dogs-three-image {
width: 100%;
height: auto;
display: block;
float: left;
}
#we-love-dogs-three-text {
left: 0;
position: absolute;
width: 100%;
color: white;
top: calc(50% - 17px);
font-size: 1.5em;
display: inline-block;
font-family: "Montserrat";
}
Any help would be appreciated. Thanks!
cliffgallagher# , try using divs to auto resize rather than hardly setting the width or height per image, here is an example post: How do I auto-resize an image to fit a div container.
img {
max-width: 100%;
max-height: 100%;
}
.portrait {
height: 80px;
width: 30px;
}
.landscape {
height: 30px;
width: 80px;
}
.square {
height: 75px;
width: 75px;
}
Portrait Div
<div class="portrait">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
Landscape Div
<div class="landscape">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
Square Div
<div class="square">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
I'm trying to put a pseudo element as a background image that simply crops at the document's width. However, when I put a background image in it keeps expanding the width of the document, making some other divs really wide.
Specifically, you can see from the screenshot that the nav is extending its width to accommodate the pseudo element's background image.
My attempt:
I've seen it done, but am not what the difference is, as the code in the actual pseudo element is the same. An example:
HTML:
<nav class="navbar navbar-default navbar-fixed-top navbar-custom">
<div class="container nav-down">
<div class="navbar-header page-scroll">
<a class="navbar-brand" href="/"><img src="/static/ScoopsLogo.png" alt="${out.global.siteName} Logo"></a>
<p class="navbar-blog">Blog</p>
</div>
</div>
<div id="scroll-progress">
<div id="scroll-progress-bar"></div>
</div>
</nav>
<section id="home">
<div class="home-1">
<div class="home1-1">
<h1>Sound smart at the dinner table</h1>
<h5>Learning made easy & fun</h5>
</div>
</div>
<div class="home-lessons fade-in-up-static delay-2">
<!-- List of Lessons -->
<h5 class="text-center">NEW SCOOPS</h5>
<div class="lessons-list">
</div>
</div>
</section>
CSS:
.navbar {
min-height: 50px;
margin-bottom: 20px;
}
.navbar-default {
background-color: #f8f8f8;
border-color: #e7e7e7;
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.container {
max-width: 600px;
}
.navbar-custom {
.navbar-header {
width: inherit;
max-width: inherit;
}
.navbar-brand {
img {
width: auto;
height: 100%;
}
}
.navbar-blog {
float: right;
padding: 10px;
margin: 3px 10px 0 0;
}
}
.home-lessons {
width: 100%;
padding: 3%;
#media (min-width: $screen-md-min) {
margin-bottom: 20px;
padding: 20px 40px;
}
h5 {
margin-top: -100px;
}
&::before {
content: '';
background-image: url(/static/Scoops-Icons.png);
background-size: cover;
width: 500px;
height: 500px;
display: block;
position: absolute;
margin-left: 200px;
margin-top: -200px;
}
}
I just answered a very similar question that you put a bounty on over here. In this case, I think that your best bet would be to either enforce a max width on your background-carrying pseudo-element, or drop the overflow-x on your document.
Below is a snipper of your CSS with the fix:
.home-lessons {
width: 100%;
padding: 3%;
#media (min-width: $screen-md-min) {
margin-bottom: 20px;
padding: 20px 40px;
}
h5 {
margin-top: -100px;
}
&::before {
content: '';
background-image: url(/static/Scoops-Icons.png);
background-size: cover;
width: 500px;
height: 500px;
display: block;
position: absolute;
margin-left: 200px;
margin-top: -200px;
max-width: calc(100% - 200px); /* HERE IS THE FIX */
}
}
If that didn't work, the quick fix would be to go for this:
html {
overflow-x: hidden;
}
I've seen some people overkill it slightly by using, html, body as their CSS selectors, this is up to you.
Parent element should use a position: relative whilst the child element uses top: 0 and left: 0.
Like this:
.parent {
position: relative;
}
.child {
top: 0;
left: 0;
}
I am having some trouble positioning an element to its parent absolutely while keeping it responsive. Lets just say I have a responsive <section> that is 66% of the screen width and centered. I have a <nav> that is supposed to be stuck to the side of it at all times. However once your screen size is less than 992px, the width of that <section> is now 100%. The <nav> that is supposed to be always on the side is now supposed to be stuck to the top of the <section>...
All of this I can do and make it work properly... until you keep shrinking the size of the screen down where the <li> 's in the <nav> have to stack on top of eachother. When this happens the <nav> is now covering part of the <section> instead of remaining aligned with it.
I have made a codepen with an example of this. I gave the elements background colors so its easier to see whats happening. Any help or suggestions would be appreciated. Is there a way I can do this without controlling it with multiple media queries?
HTML
<section class="col-8-12 offset-2">
<nav class="to-do-list">
<ul>
<li>Add Some1 Info</li>
<li>Add Some2 Info</li>
<li>Add Some3 Info</li>
<li>Add Some4 Info</li>
</ul>
</nav>
<div>
<h1>Some Title Here</h1>
<p>Some1 Stuff Here</p>
<p>Some2 Stuff Here</p>
<p>Some3 Stuff Here</p>
<p>Some4 Stuff Here</p>
</div>
</section>
CSS
html { background-color: #1394cb; }
.col-8-12 { width: 66.66666667%; }
.offset-2 { margin-left: 16.66666667%; }
section { float: left; margin-top: 250px; background-color: #0d2c41; position: relative; }
nav.to-do-list { position: absolute; left: -177px; top: 0; background-color: #FFF; max-width: 180px; }
div>h1, div>p { color: #FFF; padding-left: 15px; }
ul>li { list-style: none; margin-right: 30px; }
#media only screen and (max-width: 992px){
.col-8-12 { width: 100%; }
.offset-2 { margin-left: 0; }
nav.to-do-list { left: 0; top: -50px; min-height: 50px; display: inline-block; max-width: none; width: 95%; margin-left: 2.5%; }
ul>li { display: inline-block; }
}
Simply use relative positioning at lower resolutions. Using absolute will break your layout because the element is removed from the regular flow and therefore doesn't affect other elements around it.
With minor other modifications:
html { background-color: #1394cb; }
.col-8-12 { width: 66.66666667%; }
.offset-2 { margin-left: 16.66666667%; }
section { float: left; margin-top: 250px; ; position: relative; }
section > div {background: #0d2c41; padding: 10px 0;}
nav.to-do-list { position: absolute; left: -177px; top: 0; background-color: #FFF; max-width: 180px; }
div>h1, div>p { color: #FFF; padding-left: 15px; }
ul>li { list-style: none; margin-right: 30px; }
#media only screen and (max-width: 992px){
.col-8-12 { width: 100%; }
.offset-2 { margin-left: 0; }
nav.to-do-list { position: relative; left: 0; min-height: 50px; display: inline-block; max-width: none; width: 95%; margin-left: 2.5%; }
ul>li { display: inline-block; }
}