I am new to html and css and I am trying to build a banner that when the window narrows, it will hide the text instead of pushing it to the next row.
I have overflow included but didn't seem to work. The link "order history" gets pushed to another row.
Before windows narrows
After windows narrows and order history becomes stacked
Here are my codes, thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="keyword" content="mil-spec, fabrics">
<title>Whittier Fabrics</title>
<link href="WhittierFabricMainPage_Stylesheet.css" rel="stylesheet"/>
</head>
<body>
<header class="site-header">
<div class="site-header_wrapper1">
(626)202-3312
Email Us
Login
</div>
<div class="site-header_wrapper2">
<img src="logo.svg" alt="Whittier Fabrics"/>
<input type="text" class="search" placeholder="Search..">
<div class="bottom-row">
Order
Order History
</div>
</div>
</header>
</body>
</html>
#charset "utf-8";
.site-header_wrapper1{
flex: 1;
display: flex;
justify-content: flex-end;
width: 800;
}
a{
padding: 8px;
}
.site-header_wrapper2{
display: flex;
justify-content: space-between;
align-items: center;
overflow: hidden;
}
.bottom-row{
display: flex;
justify-content: flex-end;
}
.brand, .search, .bottom-row{
flex: 1;
}
.button{
display: inline;
}
I added overflow: hidden in CSS but didn't work.
I tried to use the following html where I removed the div class "bottom-row" and it worked, but I am wondering, if I wanted to keep the div class "bottom-row" as I originally had, how can I keep the links hidden?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="keyword" content="mil-spec, fabrics">
<title>Whittier Fabrics</title>
<link href="WhittierFabricMainPage_Stylesheet.css" rel="stylesheet"/>
</head>
<body>
<header class="site-header">
<div class="site-header_wrapper1">
(626)202-3312
Email Us
Login
</div>
<div class="site-header_wrapper2">
<img src="logo.svg" alt="Whittier Fabrics"/>
<input type="text" class="search" placeholder="Search..">
Order
Order History
</div>
</div>
</header>
</body>
</html>
Related
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 3 months ago.
I am new to flexbox and I know this is a very simple question but i cant seem to figure it out. I am trying to align eveyrthing on the test2 div in the center but it wont align no matter what i do . I tried justify-content and align-items and not working. Below is my code any help would be really appreciated.
<div style="display: flex; flex-direction: row;">
<div style='flex-grow: 1; '>
Test
</div>
<!--Test 2 lookign to align center-->
<div style='flex-grow: 1'>Test 2 </div>
Here's a sample for your code.
#box {
width: 300px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
background-color:red; /* optional */
}
#box div {
width: 100px;
height: 100px;
background-color:white; /* optional */
}
<div style="display: flex; flex-direction: row;">
<div style="flex-grow: 1;">Test</div>
<!--Test 2 lookign to align center-->
<div id="box" style="flex-grow: 1;">
<div>test2</div>
</div>
</div>
Hey I think I resolved your topic. If you have some questions you can ask me again.
See you have a nice day :)
#position{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div id="position">
<div id="container">
<p>Test1</p>
<p>Test2</p>
</div>
</div>
</body>
</html>
As you can see in the code snippets below when the size of the web page reaches 776px it becomes column like aligned but it isn't directly aligned under each other. I have added the align-items property, How do I directly align the elements under each other?
.banner-content-container {
display: flex;
justify-content: space-evenly;
padding-top: 200px;
}
#media screen and (max-width:776px) {
.banner-content-container {
align-items:center;
flex-direction: column;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="banner-content-container">
<div class="content contexts1">
<h3>01. Mobile conductive</h3>
<p>Smart optimization of RWD design.</p>
</div>
<div class="content contexts2">
<h3>02. User Interface</h3>
<p>Brilliant UI/UX creative designs.</p>
</div>
<div class="content contexts3">
<h3>03. Affordable</h3>
<p>Our offers dont break the bank.</p>
</div>
</div>
</body>
</html>
You could use the align-text attribute in this case:
.banner-content-container {
display: flex;
justify-content: space-evenly;
padding-top: 200px;
}
#media screen and (max-width:776px) {
.banner-content-container {
text-align: center; /* changed this line */
flex-direction: column;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="banner-content-container">
<div class="content contexts1">
<h3>01. Mobile conductive</h3>
<p>Smart optimization of RWD design.</p>
</div>
<div class="content contexts2">
<h3>02. User Interface</h3>
<p>Brilliant UI/UX creative designs.</p>
</div>
<div class="content contexts3">
<h3>03. Affordable</h3>
<p>Our offers dont break the bank.</p>
</div>
</div>
</body>
</html>
Or if you want them centered but justified on the left, you can set the width of the container to fit-content, then center the whole container by setting margin: 0 auto;:
.banner-content-container {
display: flex;
justify-content: space-evenly;
padding-top: 200px;
}
#media screen and (max-width:776px) {
.banner-content-container {
width: fit-content;
margin: 0 auto;
flex-direction: column;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="banner-content-container">
<div class="content contexts1">
<h3>01. Mobile conductive</h3>
<p>Smart optimization of RWD design.</p>
</div>
<div class="content contexts2">
<h3>02. User Interface</h3>
<p>Brilliant UI/UX creative designs.</p>
</div>
<div class="content contexts3">
<h3>03. Affordable</h3>
<p>Our offers dont break the bank.</p>
</div>
</div>
</body>
</html>
Setting a fixed width would solve this, but it can be problematic if your content size is variable.
As an alternative, you can add another container (.demo in this example) to avoid having to specific any width. Here we centre the content with the outer container, and left align the content in the new inner flex container:
.banner-content-container {
display: flex;
padding-top: 200px;
justify-content: center;
}
.demo {
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
#media screen and (min-width:776px) {
.demo {
flex-direction: row;
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="banner-content-container">
<div class="demo">
<div class="content contexts1">
<h3>01. Mobile conductive</h3>
<p>Smart optimization of RWD design.</p>
</div>
<div class="content contexts2">
<h3>02. User Interface</h3>
<p>Brilliant UI/UX creative designs.</p>
</div>
<div class="content contexts3">
<h3>03. Affordable</h3>
<p>Our offers dont break the bank.</p>
</div>
</div>
</div>
</body>
</html>
The reason is that they are centered but have different width.
The quick fix for this is to set the same width when they are in flex column mode.
#media screen and (max-width:776px) {
.banner-content-container {
align-items: center;
flex-direction: column;
}
.content {
width: 250px;
}
}
display:flex;
flex-direction: column;
Should be together in your media query. Because by default, display:flex is a row.
My responsive site's initial zoom is incorrect on mobile:
Sample HTML is below (and in this live Codepen demo).
You can see that I'm already using <meta name="viewport" content="width=device-width, initial-scale=1">.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.ctaGrabber{
word-wrap: break-word;
font-size: 30px;
font-weight: bold;
border: 1px solid rgba(0,0,0,0.2);
border-radius: 0px;
padding-left: 30px !important;
padding-right: 30px !important;
padding-top: 20px !important;
padding-bottom: 20px !important;
}
</style>
</head>
<body class="">
<div class="container mainContainer hideWhenShowingForm">
<div class="row">
<div class="col-md-12 text-center">
<h1>“Here is a great title about a whole bunch of cool stuff”</h1>
</div>
</div>
<div class="row">
<div class="col-md-6 text-center presenters">
left col
</div>
<div class="col-md-6 text-left">
<div class="text-center">
<a href="#" class="btn btn-lg btn-primary ctaGrabber" data-hiddenForm="#hiddenCrmForm">
<span>YES! Watch The Training Now!</span>
<!-- <span class="elButtonSub" style="font-size: 14px; display: block;"></span>-->
</a>
</div>
</div>
</div>
</div>
</body>
</html>
Why does my a.ctaGrabber button's font-size not cause the mobile "zoom" to be wider?
How can I either force the viewport zoom factor to honor this large font-size OR wrap the button text (without me specifying a button width)?
Ahhh, I figured it out:
I needed to add white-space: normal; to my .ctaGrabber style to override the white-space: nowrap; style of .btn in Bootstrap's buttons.less file.
Update:
The way to narrow down what element is causing the horizontal scroll bar is to use the Inspect panel and remove elements one at a time.
Then, once you’ve figured out the offending element, remove/edit one CSS property at a time.
In my case just recently, I found that an img was using the Bootstrap img-responsive class but also had max-width: 450px;, which overrode Bootstrap's max-width: 100%;. The solution (https://stackoverflow.com/a/50194061/470749) was to wrap the img in a div with this class:
.imgMaxWidthWrapper{
max-width: 450px;
margin: auto;
}
Edited: I was trying to make a chat page that has a message textbox and a button to send inside a form element. Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>A</title>
<style>
body{height: 100vh;}
form{
line-height: 40px;
position: absolute;
}
</style>
</head>
<body>
<form name="form">
<input type="text" placeholder="A message goes here"/>
<button>Send</button>
</form>
<script>
var search = window.screen.height - 40;
document.form.style.top = search + "px";
</script>
</body>
</html>
But the form goes more than 100vh
There is no need for js or absolute positioning...you just need to set it up the way you need to look at it ...when I said use display: flex that needs to be inputed in the container box and your web content should go on a separate section outside your form like so:
body {height: 100%}
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.content {flex: 1;}
form {
width: 100%;
height: 40px;
background: #000;
}
I copy your code and added it here: https://codepen.io/izzy_zeke/pen/OqVOVL
Trying to learn Flexbox, So if I wanted something vertically and horizontally center aligned but I also wanted something else within the parent element to be aligned to the top left corner of the page, would I use two containers or is there a way to vertically and horizontally align child elements? I'm so confused.
I appreciate any replies.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Elements Website</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/hover.css" type="text/css">
</head>
<body>
<div class='container'>
<div class='content'>
<img alt="" width="400" src="image/box1.svg" class="button hvr-grow">
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
</body>
</html>
CSS
body{
background-color: azure;
background-size: cover;
height:100vh;
}
.container{
display: flex;
flex-direction: column;
min-height:100vh;
justify-content: center;
align-items: center;
}
.content{
}
.boxorange{
}