HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<header>
Header
</header>
<nav>
Nav
</nav>
<article>
Article
</article>
<div>
<aside>
Aside
</aside>
<section>
Section
</section>
</div>
<footer>
Footer
</footer>
<body>
</body>
</html>
CSS Code:
header {
background-color: cornflowerblue;
height: 60px;
padding: 0px;
margin: 0px;
text-align: center;
width: 100%;
}
nav {
background-color: khaki;
height: 50px;
padding: 0px;
margin: 0px;
text-align: center;
width: 100%;
}
article {
background-color: darkseagreen;
height: 180px;
padding: 0px;
margin: 0px;
width: 70%;
display: inline-block;
text-align: center;
}
div {
padding: 0px;
margin: 0px;
float: right;
display: inline-block;
width: 30%;
}
aside {
background-color: goldenrod;
height: 90px;
padding: 0px;
margin: 0px;
text-align: center;
}
section {
background-color: lightsteelblue;
height: 90px;
padding: 0px;
margin: 0px;
text-align: center;
}
footer {
background-color: lemonchiffon;
height: 40px;
padding: 0px;
margin: 0px;
text-align: center;
width: 100%;
}
body {
background-color: black;
font-size: 2em;
height: 60px;
padding: 0px;
margin: 0px;
text-align: center;
width: 100%;
}
Very basic coding, just trying to understand how to make a responsive page.
Im trying to make it so when the device width is less than 800 px, all elements should stack above each other
And when the device is less than 500px all elements should stack above each other but the Aside and Section elements should disappear.
I figured I need to use viewport, and found a tutorial with code like this:
#media only screen and (min-width: 600px) {
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
...continued
}
Not sure if that's the type of code I need to add to my CSS page or if I'm just over complicating it which I do often.
Okey I think,You should try it
#media only screen (min-width:500px) and (max-width: 800px) {
aside {
display:none
}
section {
display:none
}
}
and this may be help you https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp
Related
I've literally tried everything at this point, but something in my code is making my website act funny. I've set it up to accept a picture with a very tall resolution to fill the center column of my CSS grid with the other two acting as margins. When I do this with my current code, the picture overflows the grid and when I scroll the margins just stop half way down the page. The container grows to size with the height of the photo but my margins don't.
Here's a picture of my website scrolled down half way, the cream colored part is the container and the black part is where the margins stop.
Picture of website:
Thanks for any advice if someone has some!
body {
margin: 0;
width: 100vw;
height: 100vh;
font-family: Arial, Helvetica, sans-serif;
}
.content {
width: 70vw;
height: 100vh;
background-color: #252525;
}
.margin {
width: 15vw;
height: 100vh;
background-color: #000000;
}
table{
table-layout: fixed;
border-collapse: collapse;
width: 100%;
}
tr {
vertical-align: top;
}
p {
color: #45d163;
font-size: 2.5vh;
}
.fixed {
position: fixed;
}
.grid-container {
display: grid;
grid-template-columns: 15% 70% 15%;
background-color: #fceee3;
width: 100vw;
height: 100vh;
min-width: 0;
min-height: 100vh;
}
.grid-item {
background-color: #000000;
font-size: 5px;
text-align: left;
color: #f1f1f1;
min-height: 100vh;
margin-top: 0%;
}
.grid-center {
background-color: #252525;
color: blue;
font-size: 30vh;
text-align: left;
min-height: 100vh;
margin-top: 0%;
}
<!DOCTYPE html>
<html lang="en" >
<!-- partial:index.partial.html -->
<head>
<meta charset="UTF-8">
<title>Keyboard Mechanic</title>
<link rel="stylesheet" href="style.css"> </link>
<style>
.header {
overflow: hidden;
background-color: #171615;
padding: 1% 1%;
width: 100%;
position: fixed;
}
.header a {
float: left;
color: #f1f1f1;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
width: 8vw;
margin-right: 10px;
}
.header a.active {
background-color: dodgerblue;
color: white;
width: 8vw;
margin-right: 10px;
}
.header a.logo {
all: unset;
}
.login {
background-color: dodgerblue;
color: white;
width: 8vw;
margin-right: 10px;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header-right {
float: right;
}
#media screen and (max-width: 100%) {
.header a {
float: none;
display: block;
text-align: left;
}
}
</style>
<style>
.wrapper {
display: grid;
grid-template-columns: auto fit-content(70%) auto;
background-color: #fceee3;
width: 100vw;
height: 100%;
overflow: scroll;
}
.grid-item {
background-color: #000000;
font-size: 5px;
text-align: left;
color: #f1f1f1;
height: auto;
margin-top: 0%;
}
.grid-center {
background-color: #252525;
height: auto;
margin-top: 0%;
}
</style>
</head>
<body>
<div class="header">
<img src="images/cornerlogo.png" height="50px">
<div class="header-right">
<a class="active" href="newLook.html">Home</a>
<a class="active" href="games.html">Games</a>
<a class="active" href="webprojects.html">Web Projects</a>
<a class="login" href="login.html">Login</a>
Contact
About
</div>
</div>
<div class="wrapper">
<div class="grid-item"></div>
<div class="grid-center">
<img src="images/homepageFour.png" width="100%"> </img>
</div>
<div class="grid-item"></div>
</div>
</body>
</html>
<!-- partial -->
The second selector is valid because the specificity value of the selector named ".header a" is lower than the specificity value of the selector named ".header a.active".
If you want to almost maximize the specificity value, you have to: use !important.
.header a {
width: max-content !important;
}
I found this code example of a responsive sidebar menu in this link.
This example is excellent because is totally responsive but
the menu bar elements (Home, News, Contact, About) are always positioned in left part of the menu, i am looking for to position these elements at the top-center in big screen of the page, just like this example
but i was not able to succeed, i am a beginner in css, so i ask for help here, any help is appreciated, thank you very much, here is the code :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
font-family: "Lato", sans-serif;
}
.sidebar {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #04AA6D;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-left: 200px;
padding: 1px 16px;
height: 1000px;
}
#media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {float: left;}
div.content {margin-left: 0;}
}
#media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
</style>
</head>
<body>
<div class="sidebar">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
<div class="content">
<h2>Responsive Sidebar Example</h2>
<p>This example use media queries to transform the sidebar to a top navigation bar when the screen size is 700px or less.</p>
<p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
<h3>Resize the browser window to see the effect.</h3>
</div>
</body>
</html>
First, you have to change the html "sidebar" div, Add another div "a-holder"
<div class="sidebar">
<div class="a-holder">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
</div>
then in the css, add a-holder with parameters like these:
#media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {float: left;}
div.content {margin-left: 0;}
.a-holder {
margin: auto;
align-self: center;
width: 80%;
}
}
Then the full code will be
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
font-family: "Lato", sans-serif;
}
.sidebar {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #04AA6D;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-left: 200px;
padding: 1px 16px;
height: 1000px;
}
#media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {float: left;}
div.content {margin-left: 0;}
.a-holder {
margin: auto;
align-self: center;
width: 80%;
}
}
#media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
</style>
</head>
<body>
<div class="sidebar">
<div class="a-holder">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
</div>
<div class="content">
<h2>Responsive Sidebar Example</h2>
<p>This example use media queries to transform the sidebar to a top navigation bar when the screen size is 700px or less.</p>
<p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
<h3>Resize the browser window to see the effect.</h3>
</div>
</body>
</html>
As of the image provided in the question and the link provided to the template. I believe you have to add an image at the top of side navigations. As of solution to the link provided in the question.
#media screen and (min-width: 767) {
.sidebar{
text-align:center;
margin: 0;
padding: 0;
background-color: #f1f1f1;
height: 100%;
overflow: auto;
}
.sidebar a {
display: inline-block;
color: black;
padding: 16px;
text-decoration: none;
}
}
Simply swap the properties of sidebar from #media screen and (max-width: 700px) to regular one
Here is a sample
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
font-family: "Lato", sans-serif;
}
.sidebar {
margin: 0;
padding: 0;
background-color: #f1f1f1;
overflow: auto;
width: 100%;
height: auto;
position: relative;
}
*{box-sizing: border-box;}
.sidebar::after {content: ''; clear: both; display: table;}
.sidebar .logo {float: left; width: 120px; padding-left: 10px; padding-top: 15px;}
.sidebar .social_links{float: right; width: 100px;}
.sidebar .social_links ul li{list-style:none; display: inline-block;}
.sidebar .social_links ul{margin: 0;}
.sidebar .social_links ul li a {padding: 15px 5px}
.sidebar .menu {float: left; width: calc(100% - 220px); text-align:center;}
.sidebar a {
display: inline-block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #04AA6D;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
padding: 1px 16px;
}
#media screen and (max-width: 700px) {
.sidebar {
width: 200px;
position: fixed;
height: 100%;
}
.sidebar a {float: none;}
.sidebar .logo {float: none; display: block; width: 100%; text-align: center; margin-bottom: 20px;}
.sidebar .menu, .sidebar .social_links {float: none; width: 100%;}
.sidebar .menu a{display: block; }
.sidebar .social_links li {float: none; text-align:center;}
.sidebar .social_links ul{padding-left: 0; width: 100%; text-align:center;}
div.content {margin-left: 0; height: 1000px; margin-left: 200px;}
}
#media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
</style>
</head>
<body>
<div class="sidebar">
<div class="logo">LOGO HERE</div>
<div class="menu">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
<div class="social_links">
<ul>
<li>fb</li>
<li>in</li>
</ul>
</div>
</div>
<div class="content">
<h2>Responsive Sidebar Example</h2>
<p>This example use media queries to transform the sidebar to a top navigation bar when the screen size is 700px or less.</p>
<p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
<h3>Resize the browser window to see the effect.</h3>
</div>
</body>
</html>
This code is also responsive when screen size shrinks below 700px
PS: Run the code in full page to see how it looks like in desktop view
body {
margin: 0;
font-family: "Lato", sans-serif;
}
.sidebar {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
display: flex;
justify-content: center;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #04AA6D;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-left: 200px;
padding: 1px 16px;
height: 1000px;
}
#media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {float: left;}
div.content {margin-left: 0;}
}
#media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
<div class="sidebar">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
<div class="content">
<h2>Responsive Sidebar Example</h2>
<p>This example use media queries to transform the sidebar to a top navigation bar when the screen size is 700px or less.</p>
<p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
<h3>Resize the browser window to see the effect.</h3>
</div>
I am working on a side project of mine where I have an HTML and CSS file. I started working on it from a mobile-first approach and things were looking good. But then I needed to make it a responsive design and added the following tag the CSS broke and did not work properly.
<meta name="viewport" content="width=device-width, initial-scale=1">
:root {
--black: #191414;
--green: #1DB954;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap') * {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
background-color: #181818;
}
.container {
display: grid;
grid-template-rows: min-content 8fr 1fr;
background-color: #181818;
width: 100vw;
height: 100vh;
}
.main {
display: grid;
grid-template-columns: min-content 1fr;
}
.music-img {
width: 300px;
height: 300px;
object-fit: cover;
margin: 50px 50px;
}
.music-details {
display: flex;
flex-direction: column;
}
.music-name {
font-family: 'Roboto', sans-serif;
font-size: 35px;
color: #ffffff;
margin-top: 50px;
}
.album-name {
font-family: 'Roboto', sans-serif;
font-size: 30px;
color: #8e8e8e;
margin-top: 10px;
}
#play,
#forward,
#backward,
#share,
#heart {
width: 32px;
height: 32px;
margin: 20px 15px;
}
.list {
overflow: auto;
display: flex;
flex-direction: column;
-ms-overflow-style: none;
scrollbar-width: none;
/* Firefox */
}
.list::-webkit-scrollbar {
display: none;
}
.footer {
background-color: var(--black);
display: flex;
flex-direction: row;
justify-content: space-around;
align-content: center;
}
.song-name {
font-family: 'Roboto', sans-serif;
font-size: 10px;
color: #ffffff;
}
.song-band {
font-family: 'Roboto', sans-serif;
font-size: 8px;
color: #8e8e8e;
}
.song-detail {
margin: 10px 50px;
}
#test {
color: #ffffff;
width: 100px;
height: 100px;
}
#home,
#search,
#library {
width: auto;
height: calc(100vh*0.05);
margin: 30px auto;
}
.song-detail:last-child {
margin-bottom: 25px;
}
#media screen and (min-width: 768px) {
.footer {
background-color: red;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Spotify</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="main">
<div class="img">
<img src="assets/album.jpg" class="music-img"></img>
</div>
<div class=music-details>
<div class="music-name">
Justice Beaver
</div>
<div class="album-name">
The Office
</div>
<div class="play-items">
<span><img src="assets/backward.png" id="backward"></img></span>
<span><img src="assets/play.png" id="play"></img></span>
<span><img src="assets/forward.png" id="forward"></img></span>
<br>
<span><img src="assets/heart.png" id="heart"></img></span>
<span><img src="assets/share.png" id="share"></img></span>
</div>
</div>
</div>
<div class="list">
<div class="song-detail">
<div class="song-name">Celebration</div>
<div class="song-band">KOOL & THE GANG</div>
</div>
</div>
<div class="footer">
<span><img src="assets/home.png" id="home"></img></span>
<span><img src="assets/search.png" id="search"></img></span>
<span><img src="assets/library.png" id="library"></img></span>
</div>
</div>
</body>
</html>
Here is the image before adding the above tag
And here is the image after I added the above tag
I and not sue what is wrong here. Any help would be appreciable.
Thanks
You have some issues in that code. First, you didn´t made the cassette img responsive, because you gave him a px size, then the img can´t resize, it´s static. If you want to make an img responsive, you have to use relative sizes, like "%" or "vw". Then you have to do the same with the icons, or at least add a media query for smaller devices and give them smaller sizes in px.
Same thing applies to the font size, it´s better to work with "em" or "rem", because they are relative sizes.
Then, i don´t know why you added this code
#media screen and (min-width: 768px) {
.footer {
background-color: red;
}
}
Because of the media query, this code only adds red color on devices that are bigger than 768, so tablets and cellphones won't apply
You should use it the simple way
.footer {
background-color: red;
}
I think that´s a good start point to start making it responsive.
You can start by trying to make these changes.
.music-img {
width: 15vw;
height: 15vh;
object-fit: cover;
margin: 50px 50px;
}
.music-name {
font-family: 'Roboto', sans-serif;
font-size: 1em;
color: #ffffff;
margin-top: 50px;
}
.album-name {
font-family: 'Roboto', sans-serif;
font-size: 0.8em;
color: #8e8e8e;
margin-top: 10px;
}
#play,
#forward,
#backward,
#share,
#heart {
width: 25px;
height: 25px;
margin: 20px 15px;
}
.footer {
background-color: red;
}
Then I think you would figure it out the rest.
I am trying to get the following responsive footer with CSS. I can't seem to figure out how to do it, I am kind of stuck with the alignment and code. Can some guru please shed some lights? I greatly appreciate. I have tried to change , and I think I still don't really understand deeply the code. I can't seem to achieve what I want. Please help.
JSFiddle Link for the Code and CSS
body {
margin: 0!important;
padding: 15px;
background-color: #FFF;
}
.wrapper {
width: 100%;
table-layout: fixed;
}
table {
border-spacing: 0;
font-family: sans-serif;
color: #727f80;
}
.outer-table {
width: 100%;
max-width: 670px;
margin: 0 auto;
background-color: #FFF;
}
td {
padding: 0;
}
p {
margin: 0;
}
a {
color: #F1F1F1;
text-decoration: none;
}
/*--- Start Two Column Sections --*/
.two-column {
text-align: center;
font-size: 0;
padding: 5px 0 10px 0;
}
/*--- Start Two Column Image & Text Sections --*/
.two-column img {
/* width: 100%; */
max-width: 280px;
height: auto;
}
.two-column .text {
padding: 10px 0;
}
/*--- Start Footer Section --*/
.footer {
width: 100%;
background-color: #365F91;
margin: 0 auto;
color: #FFF;
}
.footer img {
max-width: 135px;
margin: 0 auto;
display: block;
padding: 4% 0 1% 0;
}
p.footer {
text-align: center;
color: #FFF!important;
line-height: 30px;
padding-bottom: 4%;
text-transform: uppercase;
}
/*--- Media Queries --*/
#media screen and (max-width: 400px) {
.two-column .column,
.three-column .column {
max-width: 100%!important;
}
.two-column img {
/* width: 100%!important; */
}
}
#media screen and (min-width: 401px) and (max-width: 400px) {
.two-column .column {
max-width: 50%!important;
}
}
#media screen and (max-width:768px) {
img.logo {
float: none !important;
margin-left: 0% !important;
max-width: 200px!important;
}
}
.two-column img {
/* width: 100% !important; */
height: auto !important;
}
img.img-responsive {
width: 100% !important;
height: auto !important;
max-width: 100% !important;
}
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="wrapper">
<table class="outer-table">
<tr>
<td class="two-column">
<table width="100%">
<tr>
<td class="footer">
<img src="http://www.talent-trust.com/documents/img/j19-logo_footer.png" alt="">
<p class="text2">Email: fake#ema.il</p>
<p class="text2">Tel: 00-0000000</p>
<br>
<img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-fb_icon.png" alt="">
</td>
<td class="footer">
<p class="text">Email: fake#gmail.com</p>
<p class="text">Tel: 00-000000</p>
<br>
<img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-youtube_icon.png" alt="">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--End Wrapper-->
Did some restructuring for the table and css, should be good now. There are many much better ways to do this design apart from table. But I did it in table format only.
If possible you can ditch table for this design and simply use flex or basic css with div's.....
body {
Margin: 0!important;
padding: 15px;
background-color: #FFF;
}
.wrapper {
width: 100%;
table-layout: fixed;
}
table {
border-spacing: 0;
font-family: sans-serif;
color: white;
}
.outer-table {
width: 100%;
max-width: 670px;
margin: 0 auto;
background-color: #FFF;
background-color: #365F91;
padding: 2%;
}
/*--- Start Two Column Sections --*/
.two-column {
text-align: center;
font-size: 0;
padding: 5px 0 10px 0;
}
/*--- Start Two Column Image & Text Sections --*/
/* .two-column img {
width: 100%;
max-width: 280px;
height: auto;
}
.two-column .text {
padding: 10px 0;
} */
.section {
width: 50%;
text-align: center;
}
.m1{
margin: 1%;
}
.p1{
padding: 1%;
}
.contact-details{
text-align: left;
}
.text-left{
text-align: left;
}
.text-right{
text-align: right;
}
/*--- Start Footer Section --*/
/* footer {
width: 100%;
background-color: #365F91;
Margin: 0 auto;
color: #FFF;
}
.footer img {
max-width: 135px;
Margin: 0 auto;
display: block;
padding: 4% 0 1% 0;
}
p.footer {
text-align: center;
color: #FFF!important;
line-height: 30px;
padding-bottom: 4%;
text-transform: uppercase;
} */
/*--- Media Queries --*/
#media screen and (max-width: 400px) {
.two-column .column, .three-column .column {
max-width: 100%!important;
}
.two-column img {
/* width: 100%!important; */
}
.three-column img {
max-width: 60%!important;
}
}
#media screen and (min-width: 401px) and (max-width: 400px) {
.two-column .column {
max-width: 50%!important;
}
.three-column .column {
max-width: 33%!important;
}
}
#media screen and (max-width:768px) {
img.logo {
float:none !important;
margin-left:0% !important;
max-width: 200px!important;
}
.two-column .section {
width: 100% !important;
max-width: 100% !important;
display: inline-block;
vertical-align: top;
}
.two-column img {
/* width: 100% !important; */
height: auto !important;
}
img.img-responsive {
width:100% !important;
height:auto !important;
max-width:100% !important;
}
.content {
width: 100%;
padding-top:0px !important;
}
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="wrapper">
<div class="wrapper-inner2">
<table class="outer-table">
<tbody>
<tr>
<td class="section">
<img width="60%" src="http://www.talent-trust.com/documents/img/j19-logo_footer.png" alt="">
</td>
<td class="section">
<div class="contact-details">
<p style="margin-bottom: 0">Email: hansheung#gmail.com</p>
<p style="margin-top: 0">Tel: 04-2294366</p>
</div>
</td>
</tr>
<tr>
<td class="text-right p1"><img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-fb_icon.png" alt=""></td>
<td class="text-left p1"><img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-youtube_icon.png" alt=""></td>
</tr>
</tbody>
</table>
</div>
<!--End of Wrapper Inner-->
</div>
<!--End Wrapper-->
</body>
no need to use the table for this design, you can use flex and can easily achieve it,
the best way to learn flex in a fun way is flexbox froggy
it's easy and powerful, try this and need something else on mobile so just make width 100% or everything in responsive points, the flex-wrap property will break it in a single column, or you can use flex-direction as well.
body {
Margin: 0!important;
padding: 15px;
background-color: #FFF;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
width: 100%;
background: #053D66;
padding: 20px 30px;
}
img {max-width: 100%;}
p {
Margin:0;
}
a {
color: #F1F1F1;
text-decoration: none;
}
.d-flex {display: flex;}
.wrapper-inner2 {
flex-wrap: wrap;
}
..wrapper-inner2 >div {display: flex; justify-content: center;}
.image,.contact {width: 50%;}
.image img {
max-width: 75%;
margin: 0 auto;
}
.social {width: 100%; display: flex; justify-content: center; margin-top: 40px;}
.social > a {
display: inline-block;
margin-right: 20px;
}
.social > a:last-child {
margin-right: 0;
}
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="wrapper">
<div class="wrapper-inner2 d-flex">
<div class="image">
<img src="http://www.talent-trust.com/documents/img/j19-logo_footer.png" alt="">
</div>
<div class="contact">
<p class="text2">Email: hansheung#gmail.com</p>
<p class="text2">Tel: 04-2294366</p>
</div>
<div class="social"><img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-fb_icon.png" alt=""><img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-youtube_icon.png" alt=""></div>
</div><!--End of Wrapper Inner-->
</div><!--End Wrapper-->
</body>
Here's the solution you can make into two divs.
You can modify according to your style content
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.img{
max-width:100%;height:auto;}
.column {
float: left;
width: 50%;
padding: 5px;
}
.socialicons{
float: left;
width: 100%;
padding: 5px;
text-align: center;
}
.row{
background: #365F91;}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<img src="http://www.talent-trust.com/documents/img/j19-logo_footer.png" alt="Snow" style="width:100%">
</div>
<div class="column">
<p>Email: hansheung#gmail.com</p>
<p>Tel: 04-2294366</p>
</div>
<div class="socialicons">
<img src="http://www.talent-trust.com/documents/img/j19-fb_icon.png" >
<img src="http://www.talent-trust.com/documents/img/j19-youtube_icon.png" >
</div>
</div>
</body>
</html>
This can be accomplished much easier by taking advantage of display:flex. Here's some helpful documentation.
You can wrap divs around the two rows, and give that div the property "display: flex".
I write a html page containing a header on top, following by a section part and an aside part, and then a footer part, and write some CSS codes for styling. here is the html and CSS code:
body{
width: 80%;
margin: 0 auto;
background-color: peachpuff;
}
header, section, aside, footer, article{
margin: 10px;
padding: 10px;
text-align: center;
background-color: aliceblue;
border: 1px solid cadetblue;
font-size: 2rem;
width: 100%;
box-sizing: border-box;
}
header>h1{
height: 100px;
font-size: 2.5rem;
text-shadow: 2px 2px 2px red;
}
article {
width: 85%;
margin: 0 auto;
}
section{
width: 60%;
height: 300px;
margin-right:3px;
display: inline-block;
/*float:left;*/
}
aside{
width: 37%;
margin-left:3px;
height: 300px;
float: right;
display: inline-block;
}
footer{
display: block;
width: 100%;
background-color: aliceblue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<h1>This is header.</h1>
</header>
<section>
this is section.
<article>this is article.</article>
</section>
<aside>aside part.</aside>
<footer>this is footer.</footer>
</body>
</html>
I set width:100% for header and footer, and it should make then to stretch so fill all the body width, as body is their parent node. but I notice that it cause header and footer that go beyond the body width at right side! if I comment that, every thing will be fine, but why it doesn't work as expected?
and second question, I want section and aside to be located next to each other, and by setting float:right; for aside tag they are, but if I set float:left; for section element too, while they still are next to each other, footer become their background too! why that happens?
thanks.
The margin:10px; will push the header out of the body, remove the margin from the header and it works fine.
body{
width: 80%;
margin: 0 auto;
background-color: peachpuff;
}
header, section, aside, footer, article{
padding: 10px;
text-align: center;
background-color: aliceblue;
border: 1px solid cadetblue;
font-size: 2rem;
width: 100%;
box-sizing: border-box;
}
header>h1{
height: 100px;
font-size: 2.5rem;
text-shadow: 2px 2px 2px red;
}
article {
width: 85%;
margin: 0 auto;
}
section{
width: 60%;
height: 300px;
margin-right:3px;
display: inline-block;
/*float:left;*/
}
aside{
width: 37%;
margin-left:3px;
height: 300px;
float: right;
display: inline-block;
}
footer{
display: block;
width: 100%;
background-color: aliceblue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<h1>This is header.</h1>
</header>
<section>
this is section.
<article>this is article.</article>
</section>
<aside>aside part.</aside>
<footer>this is footer.</footer>
</body>
</html>
body{
width: 80%;
margin: 0 auto;
background-color: peachpuff;
}
header, section, aside, footer, article{
margin: 10px 0 0 0;
padding: 10px;
text-align: center;
background-color: aliceblue;
border: 1px solid cadetblue;
font-size: 2rem;
width: 100%;
box-sizing: border-box;
}
header>h1{
height: 100px;
font-size: 2.5rem;
text-shadow: 2px 2px 2px red;
}
article {
width: 85%;
margin: 0 auto;
}
section{
width: 60%;
height: 300px;
margin-right:3px;
display: inline-block;
/*float:left;*/
}
aside{
width: 37%;
margin-left:3px;
height: 300px;
float: right;
display: inline-block;
}
footer{
display: block;
width: 100%;
background-color: aliceblue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<h1>This is header.</h1>
</header>
<section>
this is section.
<article>this is article.</article>
</section>
<aside>aside part.</aside>
<footer>this is footer.</footer>
</body>
</html>