I am making a copy of The Boring Company website to get a bit practise and I ran into a text problem.
The site consists of one section that contains a header with nav and below the header, there is a div that contains a title and some text. The problem is that upon resizing the browser window, the text starts getting pushed inside the header.
How the site normally looks
How it looks after resizing the browser window
Is there any way to prevent this, please? Thanks in advance!
/* GENERAL */
* {
padding: 0;
margin: 0;
}
body, html {
height: 100%;
}
body {
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
}
.layout {
background: rgba(0, 0, 0, 0.37);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* SECTIONS */
main, section {
box-shadow: inset 0px -40px 50px 30px #000000;
height: 100Vh;
position: relative;
padding-top: -1px;
color: white;
}
.tunnels2-section {
background: url("/IMGs/tunnels2-section.jpg");
background-size: cover;
background-attachment: fixed;
background-position: center;
}
/* HEADER AND NAV */
header {
background: black;
padding: 0.1em;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
margin: 1em 5em;
font-family: 'Ropa Sans', sans-serif;
font-weight: bold;
}
.burger {
position: absolute;
right: 1%;
top: 2%;
display: none;
}
.burger div {
width: 25px;
height: 2px;
margin: 5px;
background-color: white;
border: 1px solid black;
}
.main-nav-items {
display: flex;
align-items: center;
}
.main-nav-item, .side-nav-item {
display: inline-block;
margin: 0em 0.6em;
}
li a {
color: white;
text-decoration: none;
}
/* MAIN CONTENT */
.boring-company-info {
position: absolute;
bottom: 28%;
margin: 0em 6em;
font-size: 0.7em;
font-family: "Roboto", sans-serif;
color: white;
opacity: 1;
transition: 0.5s ease;
transform: translateY(20px);
}
h2 {
margin-bottom: 0.2em;
}
.info-title {
font-size: 3em;
font-weight: 600;
margin-bottom: 0.65em;
}
.info-description {
line-height: 20px;
font-size: 1.55em;
font-weight: 500;
width: 55%;
}
.tunnels-info-description {
font-size: 1.38em;
font-weight: 100;
line-height: 22px;
width: 65%;
}
b {
font-weight: 700;
}
#media screen and (max-width: 915px) {
.burger {
display: block;
}
.main-nav-item a, .side-nav-item a {
display: none;
}
nav {
margin: 0;
}
.boring-company-desc {
margin: 0em 2em;
}
h2 {
margin-top: 0.7em;
}
}
#media screen and (max-width: 641px) {
.boring-company-info {
margin: 0em 2em 0em;
}
/* This fixes the issue, but only temporarily. It still overflows to
the header above it. */
.info-description {
width: 100%;
}
}
<section class="tunnels2-section">
<div class="layout">
<header>
<nav>
<ul class="main-nav-items">
<li class="main-nav-item"><img src="IMGs/company-logo.png" width=115px class="company-logo" alt="Logo of the Boring Company"></li>
<li class="main-nav-item">TUNNELS</li>
<li class="main-nav-item">PRODUCTS</li>
<li class="main-nav-item">PROJECTS</li>
<li class="main-nav-item">PRUFROCK</li>
<li class="main-nav-item">LOOP</li>
</ul>
<ul class="side-nav-items">
<li class="side-nav-item">CAREERS</li>
<li class="side-nav-item">FLAMETHROWER</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</header>
<div class="boring-company-info" id = "why-tunnels">
<h1 class="info-title">WHY TUNNELS?</h1>
<p class="tunnels-info-description info-description"><b>Solve traffic: </b>to solve the problem of soul-destroying traffic, roads must go 3D. Surface roads today incorporate 3D model-like elevated highways and cloverleaf interchanges that are expensive and disruptive to build. Tunneling networks are 3D and provide high-throughput transportation in an economically viable way. Traffic and congestion will be a thing of the past. </p>
<p class="tunnels-info-description info-description"><br><b>Beautify our cities:</b> existing transportation networks occupy valuable space in cities where land availability is scarce. Tunnels minimize usage of surface area and could move entire transportation networks underground. Taking transportation underground allows us to repurpose roads into community-enhancing spaces, and beautify our cities.</p>
<p class="tunnels-info-description info-description"><br><b>Enable HyperLoop:</b> Hyperloop networks unlock high-speed regional transportation surpassing other alternatives. Hyperloop enables access to individualized, point to point high-speed transportation.</p>
</div>
</div>
</section>
You will need to add this to the appropriate breakpoint.
main, section {height: auto;}
I would try to avoid using position: absolute on the .boring-company-info class as that can create theses sorts of conflicts.
If you're looking to position it on the page in a certain way, consider adjusting the padding or margins of the elements on the page or look into using flex. https://css-tricks.com/snippets/css/a-guide-to-flexbox/
So I made a simple page that looks like below:
It looks fine but if I change it to a smaller window or changing the zoom %, this is what it looks like:
As you can see, it's not right as the button is way off but the <p> and <h> tag seems to be align but not the button.
Here is my relevant part of the code:
function Pitch() {
return (
<div className="section">
<div className="descriptionpitch">
<h1>See what's next.</h1>
<p>WATCH ANYWHERE. CANCEL ANYTIME.</p>
</div>
<div className="joinbutton">
<button>JOIN FREE FOR A MONTH</button>
</div>
</div>
);
}
scss:
.section {
color: white;
margin: 0 3%;
position: absolute;
top: 35%;
font-size: 1.8vw;
//text-align: center;
#media (max-width: 1000px) {
top: 55%;
font-size: 1.9vw;
}
#media (max-width: 800px) {
top: 60%;
font-size: 3.2vw;
margin: 0 4em;
text-align: center;
}
h1 {
font-size: 3em;
margin: 0 0 0.2em;
font-weight: 700;
}
p {
margin: 0 3.5em 0 0;
font-weight: 700;
}
button {
font-size: 14px;
letter-spacing: 1.9px;
font-weight: 100;
margin: 1.2em 24.5em 0 0;
padding: 12px 2em;
color: white;
background-color: #e50914;
cursor: pointer;
text-decoration: none;
//vertical-align: middle;
font-family: Arial, sans-serif;
border-radius: 2px;
user-select: none;
// text-align: center;
border: 0;
&:hover {
background-color: #e53935;
}
}
}
Is there a way i could fix this?
Try this code..add this in same div.. if u want more space at the top of the button. add margin-top for this button
function Pitch() {
return (
<div className="section">
<div className="descriptionpitch">
<h1>See what's next.</h1>
<p>WATCH ANYWHERE. CANCEL ANYTIME.</p>
<button>JOIN FREE FOR A MONTH</button>
</div>
</div>
);
}
And modify this css code too..
css
#media (max-width: 800px) {
.section {
text-align: left;
}
}
In your CSS code, make on change, remove text-align: center; from this block
...
#media (max-width: 800px) {
top: 60%;
font-size: 3.2vw;
margin: 0 4em;
/* text-align: center; */
}
...
working demo on stackblitz here
Remove the margin-right from the button in your 800px media query.
I'm facing issue for responsiveness using DreamWeaver 2017.
The CSS for the logo :
#logo {
margin-left: 6cm;
padding-top: 40px;
padding-bottom: 10px;
/*width: 139px;*/
text-align: left;
color: rgba(255,255,255,1.00);
}
Upon trying out the responsiveness :
I'm aware i'm using margin left which caused it.
The objective is to adapt both site and mobile site like this :
Also, if you observed even the input box also indent to the right..
.menu2 {
display: inline-flex;
text-decoration:none;
margin-left: 1.2cm;
color: #000000;
height: 40px;
}
I'm looking on other method than padding or margin.
Any critic/suggestion is welcome.
HTML codes:
<header>
<!-- This is the header content. It contains Logo and links -->
<div id="logo"><img src="logo.png" alt="sojologo"/>
<font color="black" class="menu1">ABOUT</font>
<button id="logodropdown"><img src="dropdown_arrow.png"/></button>
SIGN IN/<br>REGISTER
PROMOTIONS
TRAVEL<button id="logodropdown"><img src="dropdown_arrow.png"/></button>
<div class="menu2" style="border: 3px solid #DDD;">
<img src="icon_search.png"/>
<input size="50%" placeholder="Quick Search for any city or
street in Japan" style="border:none;"/>
</div>
</div>
</header>
Codepenio : https://codepen.io/jayvicious/pen/xrxbZz
There is a lot going on here that we can look at. One thing others have commented on is that your HTML needs cleaned up. Make sure that IDs are truly unique, and that each opening tag has a closing tag (except for self-contained elements, like images and inputs).
You could also stand to use some wrapping elements to help you contain the main areas of your header: the logo, the nav items, and the search.
From there, to help with responsiveness, I would recommend using percentages for your widths whenever possible, instead of absolute units like centimeters. This will help your display flex a little bit at bigger screen sizes. At some point, though, you'll need to just redo the layout because the screen will be too wide to fit all your elements in one line. That's where media queries come into play.
Media queries will let you override a base style when the screen is smaller (or larger) than a certain width. For example, we could set the body to be blue normally, then change to red on smaller screens:
body {
background-color: blue;
}
#media all and (max-width: 800px) {
body {
background-color: red;
}
}
Another thing we can do to tidy things up and make our life easier is to use classes when possible. The nav items are a good use case for this: most of their styles will be shared. We can give them each an ID just in case, but we may not even need to use all those IDs.
Edit: Another tidying opportunity I meant to mention is that the use of the <font> tag is deprecated as of HTML5, so you should avoid that in your HTML. I removed it from the HTML in my snippet below. (End edit.)
A final thing you can do is make the little triangles next to the nav items with HTML and CSS instead of as images. (You could also do these purely in CSS using pseudo elements.)
Here is a demo where I've cleaned up your HTML quite a bit and then heavily revised the CSS to look more like what's in the pictures you provided. I have used placeholder images with my best guess at their real sizes based on the picture. You'll see that as you resize the screen, the media queries kick in to make the header get taller and to center things in the middle of the screen.
I've also forked your Pen on CodePen.
#charset "utf-8";
/* Global Styles */
a:hover {
color: rgba(255,255,255,1.00);
}
body {
margin: 0;
}
header {
font-family: 'Montserrat', sans-serif;
color: rgba(146,146,146,1.00);
background-color: #73A7D1;
font-size: 14px;
font-style: normal;
font-weight: 400;
width: 100%;
height: 80px;
}
#header-wrapper {
width: 80%;
margin: 0 10%;
padding-top: 15px;
}
#logo, nav, #search {
float: left;
}
#logo {
width: 110px;
height: 50px;
}
nav {
width: 60%;
}
#search {
width: 200px;
}
.menu-item {
display: inline-block;
margin: 0 2.5%;
height: 30px;
color: black;
max-width: 100px; /* forces "sign in/register to break at <wbr> tab */
text-align: center;
}
#menu2 {
position: relative; /* bump "sign in/register" down a bit */
top: 7px;
}
.triangle-down { /* dropdown arrows next to nav links */
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid black;
display: block;
float: right;
margin-top: 5px;
margin-left: 3px;
}
#search img, #search input {
float: left;
height: 30px;
}
#search img {
margin-right: 5px;
}
#search input {
width: 150px;
}
#media all and (max-width: 980px) {
header {
height: 160px;
}
#logo, nav, #search {
float: none;
margin: 0 auto;
}
nav {
width: 100%;
text-align: center;
}
}
#media all and (max-width: 550px) {
header {
height: 200px;
}
}
<header>
<div id="header-wrapper">
<div id="logo"><img src="http://placehold.it/110x50" alt="sojologo"></div>
<nav>
<div class="menu-item" id="menu1">ABOUT<span class="triangle-down"></span></div>
<div class="menu-item" id="menu2">SIGN IN/<wbr>REGISTER</div>
<div class="menu-item" id="menu3">PROMOTIONS</div>
<div class="menu-item" id="menu4">TRAVEL<span class="triangle-down"></span></div>
</nav>
<div id="search">
<img src="http://placehold.it/30x30"/>
<input placeholder="Quick Search for any city or street in Japan" />
</div>
</div>
</header>
well FreedomPride
you can specify different properties for every class in each size of screens
you can use media query in this situation.
for example :
#media only screen and (max-width: 480px) {
.menu2 {
margin-left:20px;
}
}
as you see here I changed the margin in small screens 480px wide to 20px
and you can use it for each size
320px
480px
720px
1200px
you may get more information for mediaquery from here :
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
here's example of how we can do it :
#charset "utf-8";
/* Global Styles */
a:hover {
color: rgba(255,255,255,1.00);
}
/*header*/
header {
font-family: 'Montserrat', sans-serif;
color: rgba(146,146,146,1.00);
font-size: 16px;
font-style: normal;
font-weight: 400;
}
#menu1 {
display: inline-block;
margin-left: 3cm;
margin-right: auto;
height: 30px;
}
.menu2 {
display: inline-flex;
text-decoration:none;
margin-left: 1.2cm;
color: #000000;
height: 40px;
}
/* Logo placeholder*/
#logo {
margin-left: 6cm;
padding-top: 40px;
padding-bottom: 10px;
/*width: 139px;*/
text-align: left;
color: rgba(255,255,255,1.00);
}
#logodropdown {
margin-left: 0px;
border: none;
background-color: rgba(255,255,255,1.00);
}
/* div for Links in header */
#headerLinks {
float: left;
width: calc( 100% - 139px );
text-align: right;
padding-top: 10px;
padding-bottom: 10px;
background-color: rgba(255,255,255,1.00);
}
/* Links in header */
#imgContainer{
float:left;
}
#headerLinks a {
text-decoration: none;
color: rgba(146,146,146,1.00);
padding-left: 66px;
font-size: 14px;
}
/* Offer text banner*/
#offer {
font-family: 'Montserrat', sans-serif;
clear: both;
background-color: rgba(246,246,246,1.00);
color: rgba(146,146,146,1.00);
padding-top: 57px;
padding-bottom: 57px;
}
#media only screen and (max-width: 1366px) {
#logo {
margin-left: 1cm;
padding-top: 40px;
padding-bottom: 10px;
/*width: 139px;*/
text-align: left;
color: rgba(255,255,255,1.00);
}
#media only screen and (max-width: 1366px) {
#logo {
margin-left: 1cm;
padding-top: 40px;
padding-bottom: 10px;
/*width: 139px;*/
text-align: left;
color: rgba(255,255,255,1.00);
}
#media only screen and (max-width: 1280px) {
#logo {
margin-left:30px;
}
#menu1 {
margin-left:35px;
}
.menu2 {
margin-left:20px;
}
.menu2 input {
max-width:300px;
}
}
#media only screen and (max-width: 992px) {
#logo {
margin-left:25px;
}
#menu1 {
margin-left:25px;
font-size:18px;
}
.menu2 {
margin-left:15px;
font-size:14px;
}
.menu2 input {
max-width:250px;
font-size:11px;
}
#media only screen and (max-width: 720px) {
#logo {
margin-left:10px;
}
#menu1 {
margin-left:10px;
font-size:13px;
}
.menu2 {
margin-left:5px;
font-size:10px;
}
.menu2 input {
max-width:150px;
font-size:10px;
}
}
<header>
<!-- This is the header content. It contains Logo and links -->
<div id="logo"><img src="logo.png" alt="sojologo">
<font color="black" id="menu1">ABOUT</font>
<button id="logodropdown"><img src="dropdown_arrow.png"></button>
SIGN IN/<br>REGISTER
PROMOTIONS
TRAVEL<button id="logodropdown"><img src="dropdown_arrow.png"></button>
<div class="menu2" style="border: 3px solid #DDD;">
<img src="icon_search.png"/>
<input size="50%" placeholder=" Quick Search for any city or street in Japan" style="border: none;"/>
</div>
Notice: This isn't the best practice. but for more efficient you have to use any grid system or framework like bootstrap, foundation or uikit.
I think you should check for media rules to get full responsiveness in any width/height you want.
Hey guys I am trying to apply flexbox on my wordpress site.
Based on what I know Flexbox is a shorthand of "Flexible Box Layout Module", which is a CSS3 module, standardized by the World Wide Web Consortium.
So I don't have to install anything, compliant browsers support it natively but for some reason it won't work on my site: http://americanbitcoinacademy.com/course-list/
Currently I am using flex on my codes:
<div class="flex">
<div class="col-1-3">
<img src="http://americanbitcoinacademy.com/wp-content/uploads/2017/01/The-Bitcoin-Transaction-Landscape.jpg" />
<h3 style="text-align: center;">BC 101 - The Bitcoin Transaction COURSE</h3>
<p>This course covers the basics of what Bitcoin is and how the Blockchain works, how to use a Bitcoin Wallet and why Bitcoin is important.</p>
<button class="btn btn-block btn-primary">PURCHASE COURSE →</button>
</div>
</div>
.col-1-3 {
padding: 10px;
width: 28%;
float: left;
margin: 2.5%;
border: 1px solid #dedede;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
padding-bottom: 0px;
font-family: 'Lato', Verdana;
}
.col-1-3 img {
width: 100%;
}
.col-1-3 img {
width: 100%;
}
a {
margin: 0;
}
h3 {
margin: 15px auto;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
}
p{
line-height: 16px;
margin: 10px auto;
}
h4 {
margin: 0 0 20px 0;
}
}
.btn-block {
display: block;
width: 100%;
margin-top: 22px;
background: #DD374D;
}
button.btn-block{
background: #DD374D;
font-family: 'Roboto';
margin-bottom: 10px;
font-weight: bold;
}
}
#media only screen and (max-width: 767px) {
.col-1-3 {
width: 44%;
}
}
#media only screen and (max-width: 590px) {
.col-1-3 {
width: 94%;
}
}
.flex {
display: flex;
flex-wrap: wrap;
}
Which will do the trick to have equal size of the boxes NO MATTER HOW LONG IS THE CONTENT on that page by default.
Any idea why does the flexbox doesnt work?
Thank you in advance.
Your code works. You are probably not testing in a flex box capable browser:
http://caniuse.com/#search=flexbox
To align buttons to bottom:
.col-1-3 {
position: relative;
padding-bottom: 40px; /* offset height of button */
}
button.btn-block{
position: absolute;
bottom: 0px;
width: calc(100% - 20px);
}
I have been trying to align two elements, a h2 and a div side by side without having one of them colapse when the window changes to a smaller size. I've searched the web a bit but found nothing similar that would help and my solutions just wouldn't work so I though here there would be someone able to help me.
So I want it to be displayed like this at all times:
https://imagizer.imageshack.us/v2/912x135q90/631/ZYR7sc.png (Can't post images sorry!)
But when window size changes dispite the fact the div should adapt at some point it just breaks to next line:
https://imagizer.imageshack.us/v2/730x144q90/912/yRBpkc.png
Here is my code on this one:
HTML
<div id='pagetitle'>
<h2 id='subtitle'>Weapons</h2>
<div id='hline'></div>
</div>
CSS
#pagetitle { /* This div is for centering both of the elements. */
width: 90%;
margin: 0 auto;
display: block;
}
#subtitle {
display: inline-block;
color: #72c9b9;
font-size: 30px;
font-weight: 300;
text-align: center;
}
#hline {
display: inline-block;
background-color: #72c9b9;
width: 70%;
height: 1px;
position: relative;
bottom: 4px;
margin-left: 20px;
}
So this is it guys, any sugestions? Thanks in advance.
cs.almeida
Here's a way how to do it:
demo
<div id='pagetitle'>
<h2 id='subtitle'><span>Weapons</span></h2>
</div>
#pagetitle {
width: 90%;
margin: 0 auto;
display: block;
}
#subtitle {
border-bottom: #72c9b9 solid 2px;
height: 18px;
display: block;
color: #72c9b9;
font-size: 30px;
font-weight: 300;
}
#subtitle > span {
background-color: white;
padding: 10px 20px;
}