I have this simple html and css code
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400italic');
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
position: absolute; top: 50%; left: 50%; background: #121212; color: #fff;
transform: translate(-50%, -50%); font-family: "Open Sans";
}
.container {
max-width: 500px;
font-style: italic;
background: #353535;
padding: 2em; line-height: 1.5em;
border-left: 8px solid #00aeff;
}
.container span {
display: block;
color: #00aeff;
font-style: normal;
font-weight: bold;
margin-top: 1em;
}
<body>
<div class="container">
Creativity is just connecting things. When you ask creative people how they did something,
they feel a little guilty because they didn't really do it, they just saw something.
It seemed obvious to them after a while. That's because they were able to connect experiences
they've had and synthesize new things.
<span>Steve Jobs</span>
</div>
</body>
But when i view this on a mobile devices, there is some unused space left
Here in this image above there is some space left on left and right how do i make it so that only 50px is left ?
Change Body CSS Use Flex
body {
background: #121212;
color: #fff;
font-family: "Open Sans";
display: flex;
align-items: center;
justify-content: center;
min-height:100vh;
}
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400italic');
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: #121212;
color: #fff;
font-family: "Open Sans";
display: flex;
align-items: center;
justify-content: center;
min-height:100vh;
}
.container {
max-width: 500px;
font-style: italic;
background: #353535;
padding: 2em; line-height: 1.5em;
border-left: 8px solid #00aeff;
}
.container span {
display: block;
color: #00aeff;
font-style: normal;
font-weight: bold;
margin-top: 1em;
}
<body>
<div class="container">
Creativity is just connecting things. When you ask creative people how they did something,
they feel a little guilty because they didn't really do it, they just saw something.
It seemed obvious to them after a while. That's because they were able to connect experiences
they've had and synthesize new things.
<span>Steve Jobs</span>
</div>
</body>
Related
I am trying to center my text with CSS and HTML. I'm really new to web development and so am just getting started. I watched a course on the basics (made the first page) and now I'm working on my own project (the other pages)
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
/* font-size: 10px; */
font-size: 62.5%
}
body {
font-family: "Rubik", sans-serif;
line-height: 1;
font-weight: 400;
color: #FFFFFF;
}
.second-page {
background-color: #04041af9;
padding: 4.8rem 0 9.6rem 0;
}
.our-news {
max-width: 130rem;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9.6rem;
align-items: center;
}
.heading-secondary {
font-size: 5.2rem;
font-weight: 700;
/*line-height: 1.05;*/
align-items: center;
text-align: center;
color: #FFFFFF;
letter-spacing: -0.5px;
margin-bottom: 3.2rem;
}
<section class="second-page">
<div class="our-news">
<h1 class="heading-secondary">
Why buy through us?
</h1>
</div>
</section>
However, it simply will not center! I've spent hours researching it so I've finally come here for help. I've attached an image of what it looks like:
All I want is for it to appear central) - horizontally at least!
How am I supposed to achieve this (note that the section is the second)? Thanks.
You have uneven padding in your section. You need to provide uniform values like padding: 5rem 0; so that the spacing is even in the entire section
You have used grid-template-columns: 1fr 1fr in .our-news which tells that there will be 2 columns inside the container which occupies equal space. So you need to change this line to:
grid-template-columns: 1fr;
You gave a margin bottom to heading-secondary. Remove that line so that there won't be any unwanted spaces below the text.
Modified code:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
/* font-size: 10px; */
font-size: 62.5%
}
body {
font-family: "Rubik", sans-serif;
line-height: 1;
font-weight: 400;
color: #FFFFFF;
}
.second-page {
background-color: #04041af9;
padding: 5rem 0;
}
.our-news {
max-width: 130rem;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: 9.6rem;
align-items: center;
}
.heading-secondary {
font-size: 5.2rem;
font-weight: 700;
/*line-height: 1.05;*/
align-items: center;
text-align: center;
color: #FFFFFF;
letter-spacing: -0.5px;
}
<section class="second-page">
<div class="our-news">
<h1 class="heading-secondary">
Why buy through us?
</h1>
</div>
</section>
You can make it very simple with text-align: center. Without flex or grid.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
/* font-size: 10px; */
font-size: 62.5%
}
body {
font-family: "Rubik", sans-serif;
line-height: 1;
font-weight: 400;
color: #FFFFFF;
}
.second-page {
background-color: #04041af9;
padding: 4.8rem 0 9.6rem 0;
margin: 0 auto;
}
.our-news {
text-align: center; /* only this one you need!*/
}
.heading-secondary {
font-size: 5.2rem;
font-weight: 700;
color: #FFFFFF;
letter-spacing: -0.5px;
margin-bottom: 3.2rem;
width: 360px;
display: inline-block; /* make the block element to a inliner*/
}
<section class="second-page">
<div class="our-news">
<h1 class="heading-secondary">
Why buy through us?
</h1>
</div>
</section>
First, I'm so sorry because I know that it's possible, but I really suck at CSS.
This is what I'd like to do:
I've managed to do it but it's really messy... The main issue is that my header isn't responsive at all and I'd to know what is the best way to do it (I know that usually flexbox is a good practice when it comes to build something responsive but my issue is that if I create 2 columns thanks to Flexbox I won't be able to align them just next to each other).
This is my current code (I know it's uggly):
header {
background-color: #c16200;
color: white;
margin-top: 1em;
overflow: hidden;
position: sticky;
top: 0;
width: 100%; /* Full width */
z-index: 1;
max-height: 8vh;
}
h1 {
color: white;
text-align: center;
font-size: 2em;
font-family: "Raleway", sans-serif;
text-transform: uppercase;
letter-spacing: 0.08em;
position: relative;
}
.logo {
position: absolute;
top: 10px;
right: 35%;
height: 2.5em;
}
.line {
margin: 0 auto;
width: 17em;
height: 2px;
border-bottom: 2px solid white;
}
.header-sentence {
margin-top: 0.2em;
font-size: 0.8em;
font-style: italic;
text-align: center;
font-family: "Raleway", sans-serif;
}
<header id="myHeader" class="sticky">
<div class="header-title">
<h1>
Title
</h1>
<img
src="https://cdn.glitch.com/33ba966f-5c93-4fa3-969c-a216a9d7629c%2F167931478_735371457343939_8305934260393763828_n.png?v=1617205161517"
class="logo"
alt="logo plane"
/>
<div class="line"></div>
<p class="header-sentence">
subtitle
</p>
</div>
</header>
Thank you guys!
In HTML with CSS it is sometimes a good idea to do some nesting of elements.
I used an wrapper element (.header-title-composition) to layout title, line, and subtitle vertically . This is all wrapped alongside the paper plane inside .header-title, which is responsible for the horizontal layout
header {
background-color: #c16200;
color: white;
margin-top: 1em;
overflow: hidden;
position: sticky;
top: 0;
width: 100%;
/* Full width */
z-index: 1;
/* This destroys everything inside this demonstration */
/* Basing a height on the actual viewport's height is somewhat dangerous */
/* max-height: 8vh; */
}
.header-title {
display: flex;
align-items: center;
}
.header-title :first-child {
margin-left: auto;
}
.header-title :last-child {
margin-right: auto;
}
h1 {
color: white;
text-align: center;
font-size: 2em;
font-family: "Raleway", sans-serif;
text-transform: uppercase;
letter-spacing: 0.08em;
position: relative;
}
.logo {
/* position: absolute;
top: 10px;
right: 35%;*/
height: 2.5em;
}
.line {
margin: 0 auto;
width: 17em;
height: 2px;
border-bottom: 2px solid white;
}
.header-sentence {
margin-top: 0.2em;
font-size: 0.8em;
font-style: italic;
text-align: center;
font-family: "Raleway", sans-serif;
}
<header id="myHeader" class="sticky">
<div class="header-title">
<div class="header-title-composition">
<h1>
Title
</h1>
<div class="line"></div>
<p class="header-sentence">
subtitle
</p>
</div>
<img src="https://cdn.glitch.com/33ba966f-5c93-4fa3-969c-a216a9d7629c%2F167931478_735371457343939_8305934260393763828_n.png?v=1617205161517" class="logo" alt="logo plane" />
</div>
</header>
Here somewhat of a starting point for you. First of all, I added .header-brand as wrapper for title, line, sentence and image. Used display: flex for alignment. The additional media query takes care of the alignment, when the screen size is below 480px (But try it out on your own, since there are probably still some issues with that)
header {
background-color: #c16200;
color: white;
margin-top: 1em;
overflow: hidden;
position: sticky;
top: 0;
width: 100%;
/* Full width */
z-index: 1;
max-height: 80vh;
display: flex;
}
.header-brand {
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
h1 {
color: white;
text-align: center;
font-size: 2em;
font-family: "Raleway", sans-serif;
text-transform: uppercase;
letter-spacing: 0.08em;
position: relative;
margin: 0;
}
.logo {
height: 2.5em;
margin-left: 20px;
}
.line {
margin: 0 auto;
width: 17em;
height: 2px;
border-bottom: 2px solid white;
}
.header-title {
margin-top: 10px;
}
.header-sentence {
margin-top: 0.2em;
font-size: 0.8em;
font-style: italic;
text-align: center;
font-family: "Raleway", sans-serif;
}
#media screen and (max-width: 480px) {
.line {
width: 100%;
}
.logo {
margin-left: 0;
}
}
<header id="myHeader" class="sticky">
<div class="header-brand">
<div class="header-title">
<h1>
Title
</h1>
<div class="line"></div>
<p class="header-sentence">
subtitle
</p>
</div>
<img src="https://cdn.glitch.com/33ba966f-5c93-4fa3-969c-a216a9d7629c%2F167931478_735371457343939_8305934260393763828_n.png?v=1617205161517" class="logo" alt="logo plane" />
</div>
</header>
Combine flexbox and a simple wrapper using text-align: center, the decorated line can be a pseudo-element.
h1,
div,
p {
margin: 0;
}
header {
display: flex;
justify-content: center;
align-items: center;
background-color: #c16200;
color: white;
overflow: hidden;
position: sticky;
padding: 0.5rem;
top: 0;
width: 100%;
/* Full width */
z-index: 1;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.logo-wrapper {
text-align: center;
margin-right: 1rem;
}
header img {
width: 2rem;
height: 2rem;
}
h1 {
font-weight: bold;
font-size: 1.5rem;
}
h1::after {
width: 10rem;
height: 1px;
display: block;
background-color: white;
content: '';
}
<header class="sticky">
<div class="logo-wrapper">
<h1>TITLE</h1>
<p>the tag line</p>
</div>
<img src="https://cdn.glitch.com/33ba966f-5c93-4fa3-969c-a216a9d7629c%2F167931478_735371457343939_8305934260393763828_n.png?v=1617205161517" class="logo" alt="logo plane" />
</header>
I suppose you want the element which contains the title and subtitle centered, and the image aligned right to that, not both together centered. So here's a solution:
The .title-container is centered within the header using display: flex and other flex settings (see below) on the header. Avoiding both the text container and the image to be centered together is done by applying position: absolute to the image, making it a child of .title-container and applying position: relative to .title-container to make it the position reference for the absolutely positioned image. That way the image isn't considered at all when centering the .title-container.
Take a look at the position parameters for the image: Vertically-centered alignement is achieved by top: 50% and transform: translateY(-50%);, the horizontal position is done with a negative right value: -2.5rem, i.e. the width of the image (2rem) plus 0.5rem for the distance to the text container. Adjust all values as needed.
* {
box-sizing: border-box;
}
body {
margin: 0;
}
header {
display: flex;
justify-content: center;
align-items: center;
background-color: #c16200;
color: white;
position: fixed;
padding: 1rem;
top: 0;
width: 100%;
font-family: Calibri, 'Trebuchet MS', sans-serif;
}
.title-container {
text-align: center;
position: relative;
width: 200px;
}
.title-container .line {
border-top: 1px solid white;
width: 100%;
margin: 2px 0 4px;
}
.title-container img {
width: 2rem;
height: 2rem;
position: absolute;
right: -2.5rem;
top: 50%;
transform: translateY(-50%);
}
.title-container h1 {
font-size: 1.5rem;
margin: 0;
}
.title-container p {
margin: 0;
}
<header>
<div class="title-container">
<h1>TITLE</h1>
<div class="line"></div>
<p>SUBTITLE</p>
<img src="https://cdn.glitch.com/33ba966f-5c93-4fa3-969c-a216a9d7629c%2F167931478_735371457343939_8305934260393763828_n.png?v=1617205161517" class="logo" alt="logo plane" />
</div>
</header>
I am creating a link that looks like a button. One thing I am running into is if I have more than one word for the anchor the link/button text is going to the next line. It is fine if the anchor text goes to the next line, but the border then does not wrap around the entire thing. It looks as if the border breaks (not sure of the correct terminology).
See the image below for a reference: (Sorry image upload keeps failing)
Does anyone know how I can
.container {
width: 40%;
background: gray;
}
.mainLinkWrapC {
width: 80%;
margin: 50px auto;
display: block;
text-align: center;
}
.mainLink {
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: 1.4rem;
text-transform: uppercase;
padding: 15px 10px;
line-height: 1.4em;
color: #b82222;
border: 2px solid #b82222;
}
<div class="container">
<div class="mainLinkWrapC">
Hard Guarding Solutions
</div>
</div>
You just need to set display: block to your .mainLink
.container {
width: 40%;
background: gray;
}
.mainLinkWrapC {
width: 80%;
margin: 50px auto;
display: block;
text-align: center;
}
.mainLink {
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: 1.4rem;
text-transform: uppercase;
padding: 15px 10px;
line-height: 1.4em;
color: #b82222;
display: block;
border: 2px solid #b82222;
}
<div class="container">
<div class="mainLinkWrapC">
Hard Guarding Solutions
</div>
</div>
https://jsfiddle.net/magnix2k/z1sx03by/1/
I'm trying to align the icons in buttons with the labels and the text next to the button aligned in line perfectly. CSS codes I wrote - 'top: 0;', 'padding: 0;', 'display: block;', 'display: inline-block; and 'vertical-align: middle;' these didn't work for me. What am I missing?
HTML
<div class="service-wrapper">
<div class="services">
<div class="button1"><img src="http://www.evergreenwealthformula.com/new/wp-content/uploads/2017/02/Tech-Support-Icon-3.png" class="iconBtn1">TECHNICAL SUPPORT</div>
<div class="text1"><p>For technical issues with placing or receiving videophone calls.</p></div>
</div>
<div class="services">
<div class="button2"><img src="http://www.evergreenwealthformula.com/new/wp-content/uploads/2017/02/Tech-Support-Icon-3.png" class="iconBtn2">CUSTOMER SERVICES</div>
<div class="text2"><p>For questions about applying for producing, porting, moving, updating your address, or other general questions.</p></div>
</div>
</div>
CSS
#import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
html, body, #container {
font-size: 18px;
margin: 0;
padding: 0;
height: 100%;
font-family: 'Source Sans Pro', sans-serif;
}
p {
line-height: 18px;
font-size: 14px;
}
div {
padding: 0;
margin: 0;
}
.service-wrapper {
width: 100%;
background-color: #000000;
}
.services {
width: 50%;
display: flex;
margin: 0 auto;
border: solid #ff0000 1px;
}
.text1 {
flex: 1 1 auto;
text-align: left;
color: #ffffff;
}
.button1 {
flex: 0 0 auto;
background-color: #ffffff;
height: 40px;
width: 200px;
margin: 10px;
padding: 5px;
border-radius: 5px;
background: #ffbb11;
text-align: center;
color: #000000;
font-weight: bold;
}
.text2 {
flex: 1 1 auto;
text-align: left;
color: #ffffff;
}
.button2 {
flex: 0 0 auto;
background-color: #ffffff;
height: 40px;
width: 200px;
margin: 10px;
padding: 5px;
border-radius: 5px;
background: #ffbb11;
text-align: center;
color: #000000;
font-weight: bold;
}
.iconBtn1{
max-height: 60%;
max-width: 60%;
}
.iconBtn2{
max-height: 60%;
max-width: 60%;
}
It's probably not the best solution but this certainly works:
.button1 img,
.button2 img {
transform: translateY(5px);
-ms-transform: translateY(5px);
-webkit-transform: translateY(5px);
}
Your code with my code implemented: https://jsfiddle.net/z1sx03by/3/
In .button1 and .button2 remove text-align: center and add display: flex, justify-content: center, align-items: center
https://jsfiddle.net/z1sx03by/4/
Since the buttons will be styled identically, you should create one common class and apply it to all. No need to create duplicate classes for each. Give it a shot... Hope this helps! :)
You were close with the display:flex css property. Just needed to tweak a little. Also, no need to add different class names if they are going to have same style property.
#import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
html, body, #container {
font-size: 18px;
margin: 0;
padding: 0;
height: 100%;
font-family: 'Source Sans Pro', sans-serif;
}
p {
line-height: 18px;
font-size: 14px;
}
div {
padding: 0;
margin: 0;
}
.service-wrapper {
width: 100%;
background-color: #000000;
}
.services {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
border: solid #ff0000 1px;
}
.text {
flex: 1 1 auto;
text-align: left;
color: #ffffff;
}
.button {
flex: 0 0 auto;
background-color: #ffffff;
height: 40px;
width: 200px;
margin: 10px;
padding: 5px 10px;
border-radius: 5px;
background: #ffbb11;
text-align: center;
color: #000000;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
}
<div class="service-wrapper">
<div class="services">
<div class="button"><img src="http://via.placeholder.com/20x20" class="iconBtn">
<span>TECHNICAL SUPPORT</span></div>
<div class="text"><p>For technical issues with placing or receiving videophone calls.</p></div>
</div>
<div class="services">
<div class="button"><img src="http://via.placeholder.com/20x20" class="iconBtn"><span>CUSTOMER SERVICES</span></div>
<div class="text"><p>For questions about applying for producing, porting, moving, updating your address, or other general questions.</p></div>
</div>
</div>
I'm trying to achieve the following page divider:
But, I'm ending up with this:
Obviously the yellow is just to tell me where the tops and bottom are (should be white), and I seem to be getting this unwanted top and bottom margin. I've tried a few methods including display:inline-block, display:inline, margin-top:-2px but lost what I've tried and what I haven't. The span was originally a div but this was one of the many things I changed trying.
This is my last attempt:
<style>
.pageDivider {
margin: 30px 0;
background: #E5E5E5;
padding: 0;
text-align: center;
}
.pageDivider .inner {
line-height: 24px;
margin: 0 auto;
padding: 0 15px;
background: yellow;
font-size: 16px;
color: #333;
}
</style>
<div class="pageDivider"><span class="inner">SHARE</span></div>
Any clues on how to do this the proper way?
I cannot delete my question, so I will share the solution I have just found which works really, really nicely - I hope it helps others.
JSFIDDLE DEMO
h6.pageDivider {
font-family: 'Lato', 'Open Sans', sans-serif;
overflow: hidden;
text-align: center;
margin: 40px 0;
font-weight: 700;
color: #555;
}
h6.pageDivider:before,
h6.pageDivider:after {
background-color: #E9E9E9;
content: "";
display: inline-block;
height: 18px;
position: relative;
vertical-align: middle;
width: 50%;
}
h6.pageDivider:before {
right: 30px;
margin-left: -50%;
}
h6.pageDivider:after {
left: 30px;
margin-right: -50%;
}
<h6 class="pageDivider">HELLO WORLD</h6>
your answer is ....
.pageDivider {
margin: 30px 0;
background: #E5E5E5;
padding: 0;
text-align: center;
}
.pageDivider .inner {
line-height: 24px;
margin: 0 auto;
padding:2.5px 20px !important;
background: yellow;
font-size: 16px;
color: #333;
}
<div class="pageDivider"><span class="inner">SHARE</span></div>