Something really odd happens when I scale my website down to a mobile device. Everything but the images seems to be forced to the left, and can't cover the whole width. Why is this happening? / How can I fix it?\
* {
margin: 0;
padding: 0;
}
.entry-header {
display: none;
}
body {
overflow-x: hidden;
width: 100%;
}
:root {
background: #fff;
}
#logo {
display: block;
margin: auto;
width: 200px;
text-align: center;
}
nav ul {
display: flex;
justify-content: space-around;
list-style: none;
background: #38b449;
color: #fff;
font-size: 1.5rem;
font-family: 'Segoe UI', sans-serif;
}
li.selected {
color: #f05a2a;
}
nav ul li:hover {
color: springgreen;
cursor: pointer;
}
nav ul li.selected:hover {
color: #f07a2a;
}
main * {
margin: 20px auto;
}
#btns {
display: flex;
justify-content: space-around;
flex-direction: row;
}
#btns input {
width: 30%;
display: block;
padding: 10px;
background: springgreen;
border: none;
border-radius: 10px;
color: #fff;
font-size: 1.3rem;
font-weight: bold;
font-family: 'Verdana';
}
#btns input:hover {
background: #f05a2a;
cursor: pointer;
}
main p {
text-align: center;
max-width: 80%;
font-size: 1.5rem;
font-family: 'Segoe UI';
}
main {
width:100%;
}
main p:nth-of-type(4) {
font-weight: bold;
}
main hr {
width: 100%;
background: #0a0;
height: 1px;
}
.img-c {
width: 40%;
background-color: #000;
max-width: 200px;
min-width: 50px;
}
.container {
display: flex;
justify-content: space-between;
width: 200%;
}
main div {
display: flex;
justify-content: space-between;
}
main > div {
justify-content: flex-end;
width: 100%;
margin: auto;
}
#media screen and (max-width: 416px) {
.img-c {
width: 40%;
}
main > div {
display: flex;
flex-direction: column;
align-items: center;
}
}
#media screen and (max-width: 358px) {
nav ul {
flex-direction: column;
padding: 0;
}
nav ul li {
width: 100%;
text-align: center;
}
nav ul li:nth-child(2n) {
background: #0c0;
}
}
.entry-footer {
background: #efe;
}
article {
width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en-US" class="no-js gr__computerimmersion_com"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="http://www.computerimmersion.com/beta/xmlrpc.php">
<link rel="stylesheet" href="http://computerimmersion.com/beta/wp-content/themes/twentyfifteen/style.css">
<!--[if lt IE 9]>
<script src="http://www.computerimmersion.com/beta/wp-content/themes/twentyfifteen/js/html5.js"></script>
<![endif]-->
</head>
<body class="page page-id-165 page-template-default" data-gr-c-s-loaded="true">
<article id="post-165" class="post-165 page type-page status-publish hentry">
<header class="entry-header">
<h1 class="entry-title">beta-main</h1> </header><!-- .entry-header -->
<div class="entry-content">
<header>
<img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/CompImmer_logo_final_web4.png" id="logo" alt="logo"><p></p>
<nav>
<ul>
<li class="selected">Home</li>
<li>About</li>
<li>Classes</li>
<li>Jobs</li>
</ul>
</nav>
</header>
<p></p><main><p></p>
<div id="btns">
<input type="button" id="open-contact" value="Contact"><br>
<input type="button" id="open-player" value="Media">
</div>
<div>
<div class="container">
<img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/2.jpg" alt="img" class="img-c" style="height: 200px;"><br>
<img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/5.jpg" alt="img" class="img-c" style="height: 200px; background: magenta;">
</div>
<div class="container">
<img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/1.jpg" alt="img" class="img-c" style="height: 200px;"><br>
<img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/4.jpg" alt="img" class="img-c" style="height: 200px; background: magenta;">
</div>
<p></p></div>
<p>Are you looking for computer classes that go beyond the typical summer camp or one-day experience?</p>
<p>Does your child have an interest in coding or computer hardware and want to learn what to do next?</p>
<p>Computer Immersion has the answer!</p>
<p>We teach computer science and tech culture to children who are 12-18 years old. Our classes immerse students in a wide range of hardware and software related topics such as scripting, coding, “tech speak”, networking, and hardware.</p>
<p>Our classes are taught by instructors with real world industry experience and meet for 9-week sessions at locations convenient for you.</p>
<p></p></main><br>
<script src="http://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script><br>
<script>
function setHeight() {
$('.img-c').css('height', $('.img-c').innerWidth());
}
setInterval(setHeight, 10);
</script><p></p>
</div><!-- .entry-content -->
</article><!-- #post-## -->
<footer id="colophon" class="site-footer" role="contentinfo">
<img class="icon" id="facebook" src="http://computerimmersion.com/beta/wp-content/facebook.png" alt="face">
<img class="icon" id="facebook" src="http://computerimmersion.com/beta/wp-content/facebook.png" alt="twitter">
<p id="copy">© 2016</p>
</footer><!-- .site-footer -->
</body><span class="gr__tooltip"><span class="gr__tooltip-content"></span><i class="gr__tooltip-logo"></i><span class="gr__triangle"></span></span></html>
The issue here is you need to change the flex alignment from row to column and the width of your container was at 200% which went past the screen.
* {
margin: 0;
padding: 0;
}
.entry-header {
display: none;
}
body {
overflow-x: hidden;
width: 100%;
}
:root {
background: #fff;
}
#logo {
display: block;
margin: auto;
width: 200px;
text-align: center;
}
nav ul {
display: flex;
justify-content: space-around;
list-style: none;
background: #38b449;
color: #fff;
font-size: 1.5rem;
font-family: 'Segoe UI', sans-serif;
}
li.selected {
color: #f05a2a;
}
nav ul li:hover {
color: springgreen;
cursor: pointer;
}
nav ul li.selected:hover {
color: #f07a2a;
}
main * {
margin: 20px auto;
}
#btns {
display: flex;
justify-content: space-around;
flex-direction: row;
}
#btns input {
width: 30%;
display: block;
padding: 10px;
background: springgreen;
border: none;
border-radius: 10px;
color: #fff;
font-size: 1.3rem;
font-weight: bold;
font-family: 'Verdana';
}
#btns input:hover {
background: #f05a2a;
cursor: pointer;
}
main p {
text-align: center;
max-width: 80%;
font-size: 1.5rem;
font-family: 'Segoe UI';
}
main {
width:100%;
}
main p:nth-of-type(4) {
font-weight: bold;
}
main hr {
width: 100%;
background: #0a0;
height: 1px;
}
.img-c {
width: 40%;
background-color: #000;
max-width: 200px;
min-width: 50px;
}
.container {
display: flex;
justify-content: space-between;
width: 200%;
}
main div {
display: flex;
justify-content: space-between;
}
main > div {
justify-content: flex-end;
width: 100%;
margin: auto;
}
#media screen and (max-width: 416px) {
.img-c {
width: 100%;
}
.container {
flex-direction: column;
width: 100% !important;
}
main > div {
display: flex;
flex-direction: column;
align-items: center;
}
}
#media screen and (max-width: 358px) {
nav ul {
flex-direction: column;
padding: 0;
}
nav ul li {
width: 100%;
text-align: center;
}
nav ul li:nth-child(2n) {
background: #0c0;
}
}
.entry-footer {
background: #efe;
}
article {
width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en-US" class="no-js gr__computerimmersion_com"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="http://www.computerimmersion.com/beta/xmlrpc.php">
<link rel="stylesheet" href="http://computerimmersion.com/beta/wp-content/themes/twentyfifteen/style.css">
<!--[if lt IE 9]>
<script src="http://www.computerimmersion.com/beta/wp-content/themes/twentyfifteen/js/html5.js"></script>
<![endif]-->
</head>
<body class="page page-id-165 page-template-default" data-gr-c-s-loaded="true">
<article id="post-165" class="post-165 page type-page status-publish hentry">
<header class="entry-header">
<h1 class="entry-title">beta-main</h1> </header><!-- .entry-header -->
<div class="entry-content">
<header>
<img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/CompImmer_logo_final_web4.png" id="logo" alt="logo"><p></p>
<nav>
<ul>
<li class="selected">Home</li>
<li>About</li>
<li>Classes</li>
<li>Jobs</li>
</ul>
</nav>
</header>
<p></p><main><p></p>
<div id="btns">
<input type="button" id="open-contact" value="Contact"><br>
<input type="button" id="open-player" value="Media">
</div>
<div>
<div class="container">
<img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/2.jpg" alt="img" class="img-c" style="height: 200px;"><br>
<img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/5.jpg" alt="img" class="img-c" style="height: 200px; background: magenta;">
<img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/1.jpg" alt="img" class="img-c" style="height: 200px;"><br>
<img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/4.jpg" alt="img" class="img-c" style="height: 200px; background: magenta;">
</div>
<p></p></div>
<p>Are you looking for computer classes that go beyond the typical summer camp or one-day experience?</p>
<p>Does your child have an interest in coding or computer hardware and want to learn what to do next?</p>
<p>Computer Immersion has the answer!</p>
<p>We teach computer science and tech culture to children who are 12-18 years old. Our classes immerse students in a wide range of hardware and software related topics such as scripting, coding, “tech speak”, networking, and hardware.</p>
<p>Our classes are taught by instructors with real world industry experience and meet for 9-week sessions at locations convenient for you.</p>
<p></p></main><br>
<script src="http://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script><br>
<script>
function setHeight() {
$('.img-c').css('height', $('.img-c').innerWidth());
}
setInterval(setHeight, 10);
</script><p></p>
</div><!-- .entry-content -->
</article><!-- #post-## -->
<footer id="colophon" class="site-footer" role="contentinfo">
<img class="icon" id="facebook" src="http://computerimmersion.com/beta/wp-content/facebook.png" alt="face">
<img class="icon" id="facebook" src="http://computerimmersion.com/beta/wp-content/facebook.png" alt="twitter">
<p id="copy">© 2016</p>
</footer><!-- .site-footer -->
</body><span class="gr__tooltip"><span class="gr__tooltip-content"></span><i class="gr__tooltip-logo"></i><span class="gr__triangle"></span></span></html>
Related
This is the HTML. I need the header to be visible all the time, but when I click the link in the nav bar, the content goes below the sticky header. Can I solve this ussing only CSS? I have tried several solutions but none of them seems to work, perhaps because I use a header wraping another header.
'''<link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap"
rel="stylesheet">
<header id="header" class="header-outer"><div class= "header-logo"><a><img alt="img"
id="header-img" class= "smaller-image img " src=
https://logopond.com/logos/4797fa121d6d6c33b9d7d4411b994aa8.png
https://farm4.static.flickr.com/3071/2371922778_c1634f19e2.jpg?v=0></a></div>
<div class="header-inner responsive-wrapper">
<div>
<h1>Le Librairie du Parthénon</h1>
</div>
<nav class="header-navigation">
<ul>
<li><a class= "nav-link" href="#catalogo">Catalogo</a></li>
<li><a class= "nav-link" href="#ejemplares-raros">Raros</a></li>
<li><a class= "nav-link" href="#ejemplares-unicos">Unique</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="box content-box">
<div class="black-box">
<section id="catalogo">
<div class="desc">
<h2 class="dark-red">Catalogo de libros</h2>
<p>Nuestro catalogo tiene una amplia colección de ejemplares antiguos y poco comunes</p>
</div>
</section>
</div>
<div class="container">
<section id="ejemplares-raros">
<div class="desc">
<h2 class="dark-red">Ejemplares raros</h2>
<p>Libros extremadamente raros y difíciles de encontrar</p>
</div>
</section>
</div>
<div class="container">
<section id="ejemplares-unicos">
<div class="desc">
<h2 class="dark-red">Ejemplares únicos</h2>
<p>Libros únicos e invaluables</p>
</div>
</section>
</div>
<div>
<p>Los libros malditos mas peligrosos de la historia</p>
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/eZIjIWbEZdk"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div>
<form action="https://www.freecodecamp.com/email-submit" id="form">
<input name="email" id="email" type="email" placeholder="email"/>
<input id="submit" type="submit"/>
</form>
</div>
</div>
</main>'''
This is the CSS. You can see the header inner an header outer yha I use to make the header change size when you scroll down the page. The problem is that when I click a link in the nav bar the content goes below the header and it is not visible. I am a begginer and I would like to find a solution with CSS only, I already tried several solutions but anything seems to work.
'''#media (min-width: 576px;)
nav {
margin-top: 10px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 50px;
color: rgb(143,55,36);
}
body {
padding: 0;
margin: 0;
}
.smaller-image {
width:150px;
}
header {
display:flex;
position: fixed;
top:0;
left:0;
bottom:10;
width:100%;
}
.header-outer {
display: flex;
align-items: center;
position: sticky;
height: 120px;
margin: 0;
top: -50px;
background-color: rgb(153,0,0);
box-shadow: 0 2px 10px 0 rgba(0,0,0, 0.1);
}
.header-inner {
height: 70px;
position: sticky;
margin:0;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: space-between
}
.header-logo img {
display: block;
height: 70px;
}
.header-navigation {
display: flex;
flex-wrap: wrap;
}
.responsive-wrapper {
width: 90%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
}
nav > ul {
width: 35vw;
display: flex;
flex-direction: row;
justify-content: space-around;
font-weight: 400;
font-size: 22px;
color: silver;
}
ul {
color: rgb(123,55,36);
}
a {
color: rgb(21,5,11);
}
[type= "submit"] {
padding: 15px;
margin: 15px;
display: flex;
}
.box {
border-style: solid;
border-color: rgb(21,72,82);
border-width: 5px;
background-color: rgb(82,32,21);
color: rgb(21,72,82);
padding: 10px;
}
.second-box {
border-style: solid;
border-color: rgb(21,72,82);
border-width: 5px;
background-color: rgb(82,32,21);
color: rgb(21,72,82);
padding: 10px;
}
.black-box {
background-color: #292929;
padding: 30px;
margin-top: 85px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
.content-box {
box-sizing: content-box;
}
main {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 180px;
margin-right: 150px;
}
.padding {
padding-top: 170px;
}'''
For a personal project with Angular, Angular Material and Flex-Layout I am trying to achieve a similar layout used by Bring! App:
Having images of different size (not all squared) I would like to center them proportionally and allow some text under them.
I have the following template and scss styles:
<div fxLayout="row" fxLayoutGap="5px" class="cards-container">
<div class="item-card">
<div class="image">
<img src="../../../../assets/icons/apple.png" alt="Mela" />
</div>
<span class="item-name">Mela</span>
<span class="description">12</span>
</div>
<div class="item-card">
<div class="image">
<img src="../../../../assets/icons/milk.png" alt="Latte" />
</div>
<span class="item-name">Latte</span>
<span class="description">1 description comes here, must be hidden if long text</span>
</div>
</div>
//---------------------------------------------------
.cards-container {
flex-wrap: wrap;
.item-card {
display: flex;
flex-direction: column;
justify-items: end;
color: white;
width: 7em;
height: 7em;
text-align: center;
background-color: darkslategray;
margin: 5px 0;
img {
width: 40%; // TODO: how to scale?
height: 40%;
}
.text-container {
display: flex;
flex-direction: column;
.item-name {
display: inline-block;
font-size: 1.1em;
}
.description {
width: 99%;
font-size: 0.8em;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-block;
}
}
}
}
However the images do not scale down to keep the proportions with the others images, especially if narrow and long.
It all seems to look fine but it looks like your HTML code is missing the .text-container div and class.
<div class="item-card">
<div class="image">
<img src="../../../../assets/icons/apple.png" alt="Mela" />
</div>
<span class="item-name">Mela</span>
<span class="description">12</span>
</div>
should be
<div class="item-card">
<div class="image">
<img src="../../../../assets/icons/apple.png" alt="Mela" />
</div>
<div class="text-container">
<span class="item-name">Mela</span>
<span class="description">12</span>
</div>
</div>
Now for the text-overflow: ellipsis; this doesn't work on multi-lines unless you implement some JavaScript or something.
If there is any change to your code, I'd make the images a background-image instead. There could be other ways without this, but it's what I use to make sure the container is responsive with the image always responsive and centred.
For Example: https://codepen.io/StudioKonKon/pen/wRjOzr (Includes SCSS)
.image {
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
font-size: 0;
}
.image-mela {
background-image: url("https://via.placeholder.com/150x175");
}
.image-latte {
background-image: url("https://via.placeholder.com/200x50");
}
.image-long {
background-image: url("https://via.placeholder.com/50x100");
}
.cards-container {
width: 100%;
margin: auto;
display: flex;
flex-wrap: wrap;
}
.cards-container .item-card {
display: flex;
flex-direction: column;
justify-items: end;
color: white;
width: 7em;
height: 7em;
text-align: center;
background-color: darkslategray;
margin: 5px;
padding: 0.5em;
box-sizing: border-box;
overflow: hidden;
}
.cards-container .item-card .image {
display: block;
margin: auto;
width: 40%;
height: 40%;
}
.cards-container .item-card .text-container {
display: flex;
flex-direction: column;
}
.cards-container .item-card .text-container .item-name {
display: inline-block;
font-size: 1.1em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cards-container .item-card .text-container .description {
font-size: 0.8em;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
<div fxLayout="row" fxLayoutGap="5px" class="cards-container">
<div class="item-card">
<div class="image image-mela">Mela</div>
<div class="text-container">
<span class="item-name">Mela</span>
<span class="description">12</span>
</div>
</div>
<div class="item-card">
<div class="image image-latte">Latte</div>
<div class="text-container">
<span class="item-name">Latte</span>
<span class="description">1 description comes here, must be hidden if long text</span>
</div>
</div>
<div class="item-card">
<div class="image image-long">Long Image</div>
<div class="text-container">
<span class="item-name">Long Image Text</span>
<span class="description">must be hidden if long text</span>
</div>
</div>
</div>
Have you tried:
img {
width: 40%;
height: auto;
}
It should leave the image proportions consistent.
It is simple. I think it will solve the problem. :)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>item</title>
<style type="text/css" media="screen">
.item-single{
width: 100px;
background-color: #e7e7e7;
height: 100px;
text-align: center;
}
.item-single span{
display: block;
border: 1px solid #000; /* just to show the alignment */
}
.item-single img{
width: 50%; /* you can scale it down using width */
border:1px solid #000; /* just to show the alignment */
display: block;
margin: auto;
}
</style>
</head>
<body>
<div class="item-single">
<img src="http://sugamparajuli.com.np/wp-content/uploads/2019/01/banana.png">
<span class="item-name">Mela</span>
<span class="description">12</span>
</div>
</body>
</html>
This is the result.
item-image
I created my first email template (exercise). In the beginning I did it without tables, but later I converted it to tables. Now I have a mess; I'd like to center all text and the header, but I don't know how. I've used table-align but it did not work.
Code before (divs):
https://jsbin.com/pusokiyido/edit?html%2Coutput
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>emailer</title>
<meta name="description" content="Interaktywny poradnik szybkiego startu dla Brackets.">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
html, body {
/*font-size: calc 8px + (16 -8) * ((100vw - 200px) / (1200 - 200))); */
color:white;
}
}
.emailer-background {
background:#eee;
}
.emial-container {
max-width: 700px;
background: #fff;
font-family: sans-serif;
text-align: center;
margin: 0 auto;
display:block;
overflow: hidden;
border-radius: 5px;
margin-bottom:30px;
}
.text{
font-size: 0,6em;
margin-left: 5px;
margin-right:5px;
padding-left:5px;
padding-right:5px;
padding-top:20px;
color:white !important;
}
.center{
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.content {
background-image: url("img/bg.jpg");
background-color: #793985;
background-repeat: no-repeat;
background-size: cover;
}
.slogan h1 {
font-size: 3vw;
color:white;
padding-right:10px;
padding-left:10px;
letter-spacing:-0.6pt;
line-height:/*44pt*/ 2,7vw; }
.separator {
background-color: rgba(154, 207, 141, 0.1);
background: rgba(154, 207, 141, 0.1);
}
/*.separator h1, h2, h3 {
color:white !important; */
}
.separator h2 {
font-size:1,5vw;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
img {
max-width:100%;
}
.flexcontainer {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
align-items: center;
justify-content: space-around;
padding-top:10px;
}
.qr, .logo {
padding-right:10px;
padding left:10px;
min-width:45px;
}
.logo {
max-width:80px;
min-width:45px;
}
.link {
letter-spacing:10pt;
font-size:16px !important;
padding-top:15px;
padding-bottom:15px;
}
.koperta li:before{
content: “\f13d”;
font-family: “FontAwesome”;
width: 10px;
height: 10px;
margin-right: 5px;
}
</style>
</head>
<body>
<div class="emailer-background">
<div class="emial-container">
<div class="content">
<div class="separator">
<img src="img/heder.jpg" alt="header image">
<div class="text"><b>usługi fotograficzne</b>: wywoływanie fotografii z każdego typu nośnika i klisz, renowacja,
retusz zdjęć, fotografia okolicznosciowa, sesje fotograficzne studyjne i plenerowe, fotografia
reklamowa i katalogowa, akcesoria foto, <br>ramki, albumy, kubki, koszulki, poduszki z Twoim projektem</p>
<p><b>usługi poligraficzne:</b> ksero, bindowanie, drukowanie, skanowanie. </div>
</div><!--separator end-->
<div class="slogan">
<h1>Zamrażanie chwil
<br>i malowanie światłem <br>
to sztuka ! </h1>
</div>
<div class="slogan2">
<div class="separator">
<h2>Chcesz zobaczyć jak to działa?<br>
Przyjdź, przyjmiemy Cię z radością ! </h2>
</div>
</div><!--slogan 2 end-->
<div class="flexcontainer">
<div class="qr">
<img src="img/qr.svg">
</div>
<div class="logo">
<img src="img/logo.svg">
</div>
<div class="qr">
</div>
<div>
<ul class="fa-ul">
<li class="koperta"> Email: <br>zorza.studio#gmail.com</li>
<li>Tel. <b>697 625 645</b></li>
</ul>
</div>
</div><!--- felx end-->
<div class="separator">
<h2 class="link">facebook.com/zorza.studio</h2>
</div>
</div><!--content end-->
</div><!--container end-->
</div><!--background end-->
</html>
After (tables)
https://jsbin.com/muzokadutu/edit?html,output
text-align:left/rignt/center !important ;
try this.
Remove text-align: center; in .emial-container.
I am having a problem getting the text on my page to start next to a picture but it just keeps displaying underneath of it. I am not sure where I have gone wrong. I know you will not be able to load the image since its on my computer but it is located where it says yoga door and I need my text to start right next to it. Anything would be helpful. I will include a screen shot of what my page is supposed to look like.
header, nav, main, footer { display: block; }
* { box-sizing: border-box; }
body { background-color: #3f2860;
color: #3f2860;
font-family: Veranda, Arial, sans-serif; }
header { background-color: #9bc1c2;
background-image: url(lilyheader.jpg);
background-position: right;
background-repeat: no-repeat;
height: 150px; }
h1 { padding-top: 50px;
padding-left: 2em; }
nav { font-weight: bold;
float: left;
width: 160px;
padding: 1em; }
nav a { text-decoration: none;
font-weight: bold;
padding: 1em;
display: block;
text-align: center;
border: 3px outset #CCCCCC;
margin-botton: 1em;}
nav a:link { color: #497777; }
nav a:visited { color: #497777; }
nav a:hover { color: #A26100;
border: 3px inset #333333; }
nav ul { list-style-type: none;
padding-left: 0; }
main { padding-right: 2em;
margin-left: 170px;
padding-top: 1em;
display: block; }
floatleft { float: left;
margin-right: 4em; }
.studio { font-style: italic; }
.company{ font-style: italic; }
footer { background-color: #9bc1c2;
font-size: .60em;
font-style: italic;
text-align: center;
padding: 1em; }
clear { clear: both; }
#wrapper { background-color: #f5f5f5;
min-width: 1200px;
max-width: 1480px;
width: 80%;
margin-right: auto;
margin-left: auto; }
<!DOCTYPE html>
<html lang="en">
<head>
<title>Path of Light Yoga Studio</title>
<meta charset="utf-8">
<link rel="stylesheet" href="yoga.css">
<!-- [if it IE 9]>
<script src="html5shiv.js>
</script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header>
<h1>Path of Light Yoga Studio</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Classes</li>
<li>Schedule</li>
<li>Contact</li>
</ul>
</nav>
<main>
<img class="floatleft" src="yogadoor.jpg" alt="yoga door" width="225" height="300">
<h2>Find Your Inner Light</h2>
<p><span class="company">Path of Light Yoga Studio</span> provides all levels of yoga practice
in a tranquil, peaceful environment. Whether you are new to
yoga or an experienced practitioner, our dedicated instructions
can develop a practice to meet your needs. Let your inner light
shine at the <span class="company">Path Of Light Yoga Studio</span>.
</p>
<ul>
<li>Hatha, Vinyasa, and Restorative Yoga classes</li>
<li>Drop-ins welcome</li>
<li>Mats, blocks, and blankets provided</li>
<li>Relax in our Serenity Lounge before or after your class</li>
</ul>
<div>
<span class="company">Path of Light Yoga Studio</span><br>
612 Serenity Way<br>
El Dorado, CA 96162<br><br>
888-555-5555<br><br>
</div>
</main>
<footer>
Copyright © 2016 Path of Light Yoga<br>
Brittany#tracy.com<br><br>
</footer>
</div>
</body>
</html>
I believe you were just missing a "." for your floatleft class. So, your CSS would look like:
header, nav, main, footer { display: block; }
* { box-sizing: border-box; }
body { background-color: #3f2860;
color: #3f2860;
font-family: Veranda, Arial, sans-serif; }
header { background-color: #9bc1c2;
background-image: url(lilyheader.jpg);
background-position: right;
background-repeat: no-repeat;
height: 150px; }
h1 { padding-top: 50px;
padding-left: 2em; }
nav { font-weight: bold;
float: left;
width: 160px;
padding: 1em; }
nav a { text-decoration: none;
font-weight: bold;
padding: 1em;
display: block;
text-align: center;
border: 3px outset #CCCCCC;
margin-botton: 1em;}
nav a:link { color: #497777; }
nav a:visited { color: #497777; }
nav a:hover { color: #A26100;
border: 3px inset #333333; }
nav ul { list-style-type: none;
padding-left: 0; }
main { padding-right: 2em;
margin-left: 170px;
padding-top: 1em;
display: block; }
/*This was missing -->*/ .floatleft { float: left;
margin-right: 4em; }
.studio { font-style: italic; }
.company{ font-style: italic; }
footer { background-color: #9bc1c2;
font-size: .60em;
font-style: italic;
text-align: center;
padding: 1em; }
clear { clear: both; }
#wrapper { background-color: #f5f5f5;
min-width: 1200px;
max-width: 1480px;
width: 80%;
margin-right: auto;
margin-left: auto; }
You're using block level elements (p and h*), just change it or add display:inline to them, like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Path of Light Yoga Studio</title>
<meta charset="utf-8">
<link rel="stylesheet" href="yoga.css">
<!-- [if it IE 9]>
<script src="html5shiv.js>
</script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header>
<h1>Path of Light Yoga Studio</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Classes</li>
<li>Schedule</li>
<li>Contact</li>
</ul>
</nav>
<main>
<img class="floatleft" src="yogadoor.jpg" alt="yoga door" width="225" height="300">
<h2 style="display:inline">Find Your Inner Light</h2>
<p style="display:inline"><span class="company">Path of Light Yoga Studio</span> provides all levels of yoga practice
in a tranquil, peaceful environment. Whether you are new to
yoga or an experienced practitioner, our dedicated instructions
can develop a practice to meet your needs. Let your inner light
shine at the <span class="company">Path Of Light Yoga Studio</span>.
</p>
<ul>
<li>Hatha, Vinyasa, and Restorative Yoga classes</li>
<li>Drop-ins welcome</li>
<li>Mats, blocks, and blankets provided</li>
<li>Relax in our Serenity Lounge before or after your class</li>
</ul>
<div>
<span class="company">Path of Light Yoga Studio</span><br>
612 Serenity Way<br>
El Dorado, CA 96162<br><br>
888-555-5555<br><br>
</div>
</main>
<footer>
Copyright © 2016 Path of Light Yoga<br>
Brittany#tracy.com<br><br>
</footer>
</div>
</body>
</html>
Yes, you were missing a dot(.) in floatleft class.
And also I have added space for your Address.
header,
nav,
main,
footer {
display: block;
}
* {
box-sizing: border-box;
}
body {
background-color: #3f2860;
color: #3f2860;
font-family: Veranda, Arial, sans-serif;
}
header {
background-color: #9bc1c2;
background-image: url(lilyheader.jpg);
background-position: right;
background-repeat: no-repeat;
height: 150px;
}
h1 {
padding-top: 50px;
padding-left: 2em;
}
nav {
font-weight: bold;
float: left;
width: 160px;
padding: 1em;
}
nav a {
text-decoration: none;
font-weight: bold;
padding: 1em;
display: block;
text-align: center;
border: 3px outset #CCCCCC;
margin-botton: 1em;
}
nav a:link {
color: #497777;
}
nav a:visited {
color: #497777;
}
nav a:hover {
color: #A26100;
border: 3px inset #333333;
}
nav ul {
list-style-type: none;
padding-left: 0;
}
main {
padding-right: 2em;
margin-left: 170px;
padding-top: 1em;
display: block;
}
.floatleft {
float: left;
margin-right: 4em;
}
.studio {
font-style: italic;
}
.company {
font-style: italic;
}
footer {
background-color: #9bc1c2;
font-size: .60em;
font-style: italic;
text-align: center;
padding: 1em;
}
clear {
clear: both;
}
#wrapper {
background-color: #f5f5f5;
min-width: 1200px;
max-width: 1480px;
width: 80%;
margin-right: auto;
margin-left: auto;
}
<body>
<div id="wrapper">
<header>
<h1>Path of Light Yoga Studio</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Classes</li>
<li>Schedule</li>
<li>Contact</li>
</ul>
</nav>
<main>
<img class="floatleft" src="https://img00.deviantart.net/acf3/i/2013/125/7/7/tegoshi_yuuya___portray_by_lightkataomi-d648nyj.jpg" alt="yoga door" width="225" height="300">
<h2>Find Your Inner Light</h2>
<p><span class="company">Path of Light Yoga Studio</span> provides all levels of yoga practice in a tranquil, peaceful environment. Whether you are new to yoga or an experienced practitioner, our dedicated instructions can develop a practice to meet
your needs. Let your inner light shine at the <span class="company">Path Of Light Yoga Studio</span>.
</p>
<ul>
<li>Hatha, Vinyasa, and Restorative Yoga classes</li>
<li>Drop-ins welcome</li>
<li>Mats, blocks, and blankets provided</li>
<li>Relax in our Serenity Lounge before or after your class</li>
</ul>
<br><br><br><br><br>
<div class='address'>
<span class="company">Path of Light Yoga Studio</span><br> 612 Serenity Way<br> El Dorado, CA 96162<br><br> 888-555-5555
<br><br>
</div>
</main>
<footer>
Copyright © 2016 Path of Light Yoga<br>
Brittany#tracy.com<br><br>
</footer>
</div>
</body>
I am new to CSS so please excuse if this s basic question ,
I am trying to develop a similar User Interface as show in this picture below
This is my code
<div class="container">
<div class="marquee-sibling">Indices </div>
<div class="marquee">
<ul class="marquee-content-items">
<li><span>NASDAQ</span><br>
<span>4655.92</span>
<span>17.93</span>
<span>0.39%</span>
</li>
<li><span>DJIA</span><br>
<span>16414.39</span>
<span>15.82</span>
<span>0.1%</span>
</li>
</ul>
</div>
</div>
But could you please tell me why only the first span is visible and others are hidden ??
http://jsfiddle.net/Wf43X/319/
I have tried something like this..
body {
margin: 0px;
padding: 0px;
background-color: #fff;
}
.marquee {
margin: 10px;
padding: 10px;
}
span {
display: inline-block;
margin:0px;
padding:0px;
}
.container{
display: flex;
justify-content: center;
list-style-type: none;
}
.ind-cont {
background-color: #000;
width: 200px;
height: 100px;
margin: 0px;
padding:0px;
}
.txtcolor {
color: #fff;
}
.txtcolorb {
color: #aaa;
}
.ind-name {
margin: 20px;
}
.capital {
float: right;
margin: 20px;
}
.floatright {
float: right;
margin: 10px;
margin-right: 20px;
}
.one-share {
margin: 10px;
margin-left: 20px;
}
<div class="container">
<div class="marquee-sibling"> </div>
<div class="marquee">
<span class="ind-cont">
<span class="ind-name txtcolor ">NASDAQ</span>
<span Class="capital txtcolor">4655.92</span>
<span class="one-share txtcolorb">17.93</span>
<span class="per txtcolorb floatright">0.39%</span>
</span>
<span class="ind-cont">
<span class="ind-name txtcolor ">DJIA</span>
<span Class="capital txtcolor">16414.39</span>
<span class="one-share txtcolorb">15.82</span>
<span class="per txtcolorb floatright">0.1%</span>
</span>
</div>
</div>
You can do this with Flexbox
ul {
display: flex;
justify-content: center;
list-style-type: none;
}
li {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
background: black;
color: white;
border: 1px solid white;
paddgin: 10px;
}
li span {
flex: 50%;
padding: 5px;
box-sizing: border-box;
}
li > span:nth-child(4n+2),
li > span:nth-child(4n+4) {
text-align: right;
}
li > span:nth-child(4n+1),
li > span:nth-child(4n+2) {
font-size: 16px;
font-weight: bold;
}
li > span:nth-child(4n+3),
li > span:nth-child(4n+4) {
font-size: 14px;
color: #aaa;
}
<div class="container">
<div class="marquee-sibling">Indices </div>
<div class="marquee">
<ul class="marquee-content-items">
<li>
<span>NASDAQ</span>
<span>4655.92</span>
<span>17.93</span>
<span>0.39%</span>
</li>
<li>
<span>DJIA</span>
<span>16414.39</span>
<span>15.82</span>
<span>0.1%</span>
</li>
</ul>
</div>
</div>
You are breaking a line after the first span, and this code is hiding whatever is after the first line:
.container {
overflow: hidden;
height: 45px;
}
I also think that the flexbox ideas is the best but if you still want to stay with your code, I think you should try changing the size height of your .container in your css. you will be able to see the rest of your 'li' element. The text is in white color and you can't really see it when you run your code cause the background is white.