<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-type" content="text.html" charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Website</title>
<style>
body {
margin: 0;
}
#container {
width: 100%;
}
#headerBg {
width: 100%;
background-color: #ffffff;
}
#interior {
width: 100%;
margin: 0 auto;
}
#header {
width: 100%;
height: 85px;
}
#logo {
width: 200px;
height: 45px;
float: left;
display: inline-block;
margin-left: 40px;
margin-top: 40px;
}
#topNav {
width: 600px;
float: right !important;
color: #000000;
margin-right: 40px;
}
.topNavFont {
font-size:18px;
float: right;
font-family:sans-serif;
}
.social_youtube {
margin-right: 10px;
}
.social_facebook {
margin-right: 10px;
}
.social_twitter {
margin-right: 10px;
}
.searchbar {
width: 150px;
height: 30px;
margin-right: 40px;
font-size: 16px;
}
.button {
width: 130px;
height: 36px;
margin-right: 40px;
}
#bottomNav {
width: 870px;
float: right !important;
color: #000000;
margin-right: 40px;
margin-top: 10px;
}
.bottomNavFont {
font-size:1em;
color:#222;
float: right;
font-family:sans-serif;
}
.bottombutton {
width: 130px;
height: 35px;
}
#row {
margin-top: 30px;
}
img.team {
width: 1355px;
height: 650px;
margin-left: 45px;
margin-top: 5px;
}
img.leftarrow {
float: left;
width: 50px;
height: 50px;
margin-left: 40px;
margin-top: 55px;
}
div.pic {
width: 1450px;
}
img.lake {
margin-left: 30px;
}
img.battersea {
margin-left: 25px;
}
p.location {
display: inline-block;
margin-top: 5px;
margin-left: 20px;
padding-right: 100px;
}
p.battersea {
margin-left: 150px;
}
img.rightarrow {
width: 50px;
height: 50px;
margin-left: 15px;
margin-bottom: 70px;
}
#rows {
margin-top: 30px;
width: 1450px;
}
p.subtext {
display: inline-block;
width: 340px;
padding-right: 30px;
padding-left: 30px;
text-align: center;
margin-left: 20px;
margin-top: 5px;
}
p.juniors {
margin-left: 110px;
}
img.youth {
margin-left: 120px;
width: 383px;
}
img.regatta {
margin-left: 30px;
width: 383px;
}
img.rowathon {
margin-left: 32px;
width: 383px;
}
#story {
float: right;
width: 340px;
height: 300px;
margin-right: 150px;
margin-top: 50px;
}
#storytext {
margin-left: 115px;
margin-top: 50px;
height: 330px;
width: 1000px;
}
p.subheading {
width: 590px;
font-size: 19px;
font-weight: 600;
}
p.copy {
width: 790px;
height: 230px;
}
#footer {
margin-top: 70px;
height: 140px;
background-color: #0645be;
color: white;
font-size: 20px;
}
#leftside {
float: left;
margin-left: 45px;
text-align: left;
}
#rightside {
float: right;
margin-right: 35px;
text-align: right;
}
</style>
</head>
<body>
<div id="container">
<div id="headerBg">
<div id="interior">
<div id="header">
<div id="logo">
<img src="https://www.britishrowing.org/wp-content/themes/britishrowing/assets/img/brand/br-logo-horizontal.png" height="45" alt="logo">
</div>
<div id="topNav">
<img class="topNavFont social social_instagram" src="https://instagram-brand.com/wp-content/uploads/2016/11/Instagram_AppIcon_Aug2017.png?w=300" alt="instagram logo" width="37" height="36">
<img class="topNavFont social social_youtube" src="http://pluspng.com/img-png/youtube-png-youtube-play-button-png-free-download-396.png" alt="youtube logo" width="40" height="35">
<img class="topNavFont social social_facebook" src="https://s18955.pcdn.co/wp-content/uploads/2017/11/Facebook-share-icon.png" alt="facebook logo" width="37" height="35">
<img class="topNavFont social social_twitter" src="http://stagewp.sharethis.com/wp-content/uploads/2019/03/twitterimg.png" alt="twitter logo" width="37" height="35">
<form class="topNavFont"><input class="searchbar" value="Search..."></form>
<button class="topNavFont button">SIGN IN</button>
</div>
<div id="bottomNav">
<button class="bottomNavFont bottombutton shop">SHOP</button>
<button class="bottomNavFont bottombutton events">EVENTS</button>
<button class="bottomNavFont bottombutton news">NEWS</button>
<button class="bottomNavFont bottombutton go">GO ROWING</button>
<button class="bottomNavFont bottombutton about">ABOUT US</button>
<button class="bottomNavFont bottombutton home">HOME</button>
</div>
</div> <!-- closing header tag here -->
<!---------------------------->
<!-- end header code here ---->
<!---------------------------->
<div id="content">
<img class="team" src="https://www.britishrowing.org/wp-content/uploads/2017/02/Paralympics_11_09_16_1235-e1486995505416.jpg" width="1340" height="570">
</div>
<div id="row">
<img class="leftarrow" src="https://image.flaticon.com/icons/png/512/21/21256.png" width="50" height="50">
<div class="pic">
<img class="lake battersea" src="https://media.timeout.com/images/102759833/630/472/image.jpg" width="175" height="170" alt="Battersea Park">
<img class="lake" src="https://leytonstonelondone11.files.wordpress.com/2011/10/hollow-pond-boats.jpg" width="175" height="170" alt="Hollow Pond">
<img class="lake" src="https://media-cdn.tripadvisor.com/media/photo-s/04/0d/dc/b6/boating-pond.jpg" width="175" height="170" alt="Dulwich Park">
<img class="lake" src="http://www.utrc.org.uk/wp-content/uploads/2014/01/MensEight2012-for-ROWING-SQUADS-ABOUT.jpg" width="175" height="170" alt="Upper Thames">
<img class="lake" src="https://upload.wikimedia.org/wikipedia/commons/9/99/Regent%27s_Park_boating_lake_-_geograph.org.uk_-_21750.jpg" width="175" height="170" alt="Regents Park">
<img class="lake" src="https://i.pinimg.com/originals/57/63/cc/5763cc9831846834b8af799f748841c3.jpg" width="175" height="170" alt="Hyde Park">
<img class="rightarrow" src="https://image.flaticon.com/icons/png/512/20/20659.png" width="50" height="50">
<br>
<p class="location battersea">Battersea Park</p>
<p class="location hollow">Hollow Pond</p>
<p class="location dulwich">Dulwich Park</p>
<p class="location upper">Upper Thames</p>
<p class="location regents">Regents Park</p>
<p class="location hyde">Hyde Park</p>
</div>
</div>
<div id="rows">
<img class="youth" src="https://www.britishrowing.org/wp-content/uploads/2019/12/9-FRBC.png" alt="Youth Rowing Project" width="383">
<img class="regatta" src="https://www.britishrowing.org/wp-content/uploads/2019/07/England-Junior-Women-HIR2019.jpg" alt="International Womens Regatta" width="383">
<img class="rowathon" src="https://www.britishrowing.org/wp-content/uploads/2019/11/Ian-Jamieson-1600x900.jpg" alt="Charity Rowathon" width="383">
<br>
<p class="subtext juniors">Community-Focused Clubs Enables More Juniors to Reap the Benefits of Rowing</p>
<p class="subtext">Transformed Regatta Allows Cutting Edge International Rowing Competition</p>
<p class="subtext">Community-Focused Clubs Enables More Juniors to Reap the Benefits of Rowing</p>
</div>
<div id="story">
<img src="https://www.britishrowing.org/wp-content/uploads/2019/12/Shelagh-Allen.jpg" alt="Mary" width="375" height="300">
</div>
<div id="storytext">
<p class="subheading">Success for the older generation groups at the Mizuno British Indoor Rowing Championships</p>
<p class="copy">
Another keep fit enthusiast, who set herself the challenge of racing over 2000m, was Shelagh Allen. The 81-year-old, from West Byfleet in Surrey, was the oldest woman taking part in the Championships and the only competitor in the women’s 80-84 age group.
The former nurse, who finished in 10.42, took up indoor rowing at 58 and has since competed in many events, including the World Indoor Rowing Championships, and has held several British records.
She said: “I used to cycle but then tried indoor rowing and loved it.
I used to go five days a week but now go about three.
As long as I keep going I will keep doing it.
So many people say they are proud of me, which is great.”<br><br>
Her next major event will be the World Rowing Indoor Championships in Paris in February.<br>
In the meantime, the mother-of-two and grandmother-of-one will continue to go to the gym and power walk for an hour every morning with her husband Tom, 85.
The sprightly seniors impressed GB’s top para-rowers, who were also competing at the indoor championships, as part of the selection process for the Paralympics in Tokyo next year.
</p>
</div>
<div id="footer">
<div id="leftside">
<p>British Rowing, 6 Lower Mall, Hammersmith, London, W6 9DJ</p>
<p>Telephone: 020 8237 6700</p>
<p>Fax: 020 8237 6749</p>
</div>
<div id="rightside">
<p>Accessibility Statement</p>
<p>Privacy Policy and Cookies Policy</p>
<p>© Copyright 2019 British Rowing</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
As you would see, the header section, the story section and the footer section breaks. The main content in the middle seems to have elongated, so I'm not exactly sure on how to fix this. I have tried to decrease the width of the images, to see if that would fix the problem, however, when I exit from 'inspect code' it makes the images 'lessen' in width and does not fit with the rest of the content on the page.
This is the fourth attempt, after having other parts of the site break.
i think you should use css grid or flex box if you do not you can decrease size of sections like #row and images and use Percentage (%) for the values of the properties
Related
Hello to all and to all,
I'm a Junior developer and its going to be almost two weeks long as I struggle on a topic. My code works very well for the desktop version and on all browsers (Chrome, EI, Firefox, Edge).
On the other hand when I want to view my page on mobile everything works well on safari but for se that is Firefox and chrome is the disaster.
I have the impression that there are classes of my CSS that are not supported. On the other hand when I put the style in inline mode in my page html everything works well, weird all its !!!
Hoping that a savior can help me find a solution. I put you below my html code and css.
Good day everyone.
body{
background-image: url('img/bg.jpg');
background-size: cover;
background-repeat: no-repeat;
font-family:Arial,Helvetica,sans-serif;
height: 1500px;
margin: 0px;
}
.verso{
width: 370px;
height:950px ;
margin-bottom: 0px;
}
.carteModeRecto{
text-align: -moz-center;
-webkit-box-align: center;
width: 370px;
text-align: left;
margin:auto;
text-align: -webkit-center;
}
.recto,.verso{
text-align: -webkit-center;
text-align: -moz-center;
text-align: -ms-center;
margin-bottom: 50px;
overflow: hidden;
margin-top: 50px;
background-color: white;
box-shadow: 1px 1px 5px 1px black;
}
#photoprofil{
background-image: url("img/photo_roger.jpg");
width: 238px;
height: 240px;
border-radius: 150px;
margin-top: 11px;
text-align: left;
margin: auto;
margin-top: 11px;
text-align: left;
margin: auto;
}
#photoprofil2{
border: 3px solid #e5e5e5;
width: 260px;
height: 250px;
border-radius: 150px 150px;
text-align: left;
margin: auto;
padding-top: 10px;
text-align: left;
margin: auto;
padding-top: 10px;
height: 250px;
}
.ligneinfo{
display: flex;
margin-top: 7px;
}
.buton,.buton2{
display: flex;
cursor: pointer;
background-color: #ca3439;
text-align: center;
border-radius: 10px;
color: white;
text-align: left;
margin:0 auto;
outline: none;
border: none;
border: 2px solid #cb353b;
}
.buton{
margin-bottom: 30px;
width: 280px;
height: 50px;
}
.buton2{
background-color: white;
color: #2e4158;
text-align: left;
margin:0 auto;
margin-bottom: 30px;
width: 280px;
height: 52px
}
.down{
margin-top: 8px;
}
.partag{
margin-top: 4px;
width: 42px;
height: 43px;
}
.qrcode{
border: 2px solid #cb353b;
border-radius: 10px;
margin-top: 50px;
}
.buttontext2,.buttontext{
color: #2e4158;
margin-top: 15px;
font-size: 1em;
}
.buttontext{
color: white;
}
.imgbutton,.imgbutton2{
margin-left: 20px;
height: 42px;
width: 58px;
margin-right: 20px;
margin-top: 8px;
}
.imgbutton2{
height: 42px;
width: 43px;
margin-top: 5px;
}
.info{
margin-left: 35px;
}
.nom,.statu{
font-size: 1.6em;
color: #2e4158;
margin-top: 40px;
text-align: center
}
.statu{
margin-bottom: 30px;
margin-top: 0px;
}
.texte{
margin-top: 5px;
margin-left: 10px;
color: #2e4158;
font-size: 1.2em;
}
.carte{
text-align: -moz-center;
-webkit-box-align: center;
width: 370px;
text-align: left;
margin:auto;
text-align: -webkit-center;
}
.carte_visite_recto_verso {
-webkit-perspective: 740px;
perspective: 740px;
margin-top: 50px;
}
.carte_visite_recto_verso .carte {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.carte_visite_recto_verso .carte .couche {
margin:0px !important;
-webkit-transition: 1s;
transition: 1s;
-webkit-backface-visibility: hidden ;
backface-visibility: hidden ;
}
.carte_visite_recto_verso .carte .recto {
position: absolute;
z-index: 1;
}
.carte_visite_recto_verso .carteModeRecto .recto {
-webkit-transform: rotatey(-0deg);
transform: rotatey(-0deg);
}
.carte_visite_recto_verso .carteModeRecto .verso {
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
.carte_visite_recto_verso .carteModeVerso .recto {
-webkit-transform: rotatey(+180deg);
transform: rotatey(+180deg);
}
.carte_visite_recto_verso .carteModeVerso .verso {
-webkit-transform: rotatey(0deg);
transform: rotatey(0deg);
}
a{
text-decoration: none;
color: #2e4158;
}
.iconinfo{
height: 29px;
width: 25px;
}
.logo{
width: 370px;
padding-top: 30px;
margin-bottom: 20px;
text-align: -webkit-center;
}
.reseaux{
text-align: left;
margin:0 auto;
margin-left:35px;
margin-top: 60px;
padding-bottom: 70px;
}
.qrcode{
text-align: left;
margin:0 auto;
width: 280px;
height: 330px;
}
.imgqr{
text-align: left;
margin:0 auto;
margin-left: 45px;
padding-top: 60px;
}
.imglogo{
width: 300px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:image" content="img/photo_roger.jpg">
<meta name="image" content="img/photo_roger.jpg">
<meta name="description" content="Location d'imprimantes et photocopieurs,
Location et vente de matériel informatique,Téléphonie Voip et débit internet,Solutions de commutation" />
<link rel="stylesheet" media="screen" type="text/css" href="style.css">
<title>Roger Duarte : Directeur Commercial - Axium Solutions </title>
<link rel="shortcut icon" href="img/logo2.jpg" type="image/jpg"/>
<link rel="icon" href="img/logo2.jpg" type="image/jpg"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="carte_visite_recto_verso" >
<div class="carte carteModeRecto" >
<div class="couche recto" > <!--DEBUT DU MODE RECTO-->
<div class="logo">
<img src="img/logo.jpg" alt="" class="imglogo" >
</div>
<div> <!--PHOTO DU CLIENT-->
<div id="photoprofil2">
<div id="photoprofil"></div>
</div>
</div>
<div class="nom" >
Roger Duarte
</div>
<div class="statu" >
Directeur Commercial
</div>
<a href="download/vcard_roger.vcf" download>
<div class="buton2">
<img src="img/ico_download.jpg" alt="" class="imgbutton">
<div class="buttontext2" > Télécharger le contact</div>
</div></a>
<div class="buton"
onclick="$(document).find('.carte').toggleClass('carteModeVerso');
$(document).find('.carte').toggleClass('carteModeRecto');">
<img src="img/ico_partage.jpg" alt="" class="imgbutton2" >
<div class="buttontext" >Partager</div>
</div>
<div class="info">
<div class="ligneinfo" >
<img src="img/ico_mobile.jpg" alt="" class="iconinfo">
<div class="texte">01 84 00 86 21</div>
</div>
<div class="ligneinfo" >
<img src="img/ico_phone.jpg" alt="" class="iconinfo">
<div class="texte">06 62 68 25 03</div> <!--ZONE INFORMATION-->
</div>
<div class="ligneinfo" >
<img src="img/ico_sms.jpg" alt="" class="iconinfo">
<div class="texte">SMS</div>
</div>
<div class="ligneinfo" >
<img src="img/ico_mail.jpg" alt="" class="iconinfo">
<div class="texte" >Roger.duarte#axiumsolutions.fr</div>
</div>
<div class="ligneinfo" >
<img src="img/ico_web.jpg" alt="" class="iconinfo">
<div class="texte">www.axiumsolutions.fr</div>
</div>
<div class="ligneinfo" >
<img src="img/ico_adresse.jpg" alt="" class="iconinfo" >
<a href="https://goo.gl/maps/HdY48H9MVqRsX3KR9"><div class="texte" style="text-align: left;" >Immeuble Point Cardinal <br>
31 Avenue Pierre Brossolette <br>
91380 CHILLY MAZARIN</a>
</div>
</div>
</div>
<div class="reseaux" >
<div class="ligneinfo" >
<img src="img/ico_linkedin.jpg" alt="" class="iconinfo">
<div class="texte">Linkedin</div>
</div>
<div class="ligneinfo" > <!--ZONE RESEAUX SOCIAUX-->
<img src="img/ico_fb.jpg" alt="" class="iconinfo">
<div class="texte">Facebook</div>
</div>
</div> <!--FIN MODE RECTO-->
</div>
<div class="couche verso" > <!--DEBUT MODE VERSO-->
<div class="logo" >
<img src="img/logo.jpg" alt="" class="imglogo" >
</div>
<a href="vcard_roger.vcf" download>
<div class="buton2" >
<img src="img/ico_download.jpg" alt="" class="imgbutton" >
<div class="buttontext2" >Télécharger le contact</div>
</div></a>
<div class="buton2">
<img src="img/ico_mail2.jpg" alt="" class="imgbutton">
<div class="buttontext2" >Partager Par Mail</div> <!--ZONE DE PARTAGE-->
</div>
<div class="buton2" >
<img src="img/ico_whatsapp.jpg" alt="" class="imgbutton" >
<div class="buttontext2">Partager par Whatsapp</div>
</div>
<div class="buton2" >
<img src="img/ico_copier.jpg" alt="" class="imgbutton">
<div class="buttontext2" >Copier le lien</div>
</div>
<div class="buton"
onclick="$(document).find('.carte').toggleClass('carteModeVerso');
$(document).find('.carte').toggleClass('carteModeRecto');">
<img src="img/ico_retour.jpg" alt="" class="imgbutton2">
<div class="buttontext" >Retour</div>
</div>
<div class="qrcode" >
<img src="img/qr_code.jpg" alt="" class="imgqr" >
</div> <!--FIN DU MODE VERSO-->
</div>
</div>
</body>
</html>
try to use max-width instead of width. Max-width help to change size based on device size.
Example:
.verso{
width:100%;
max-width: 370px;
margin-bottom: 0px;
}
thank you for your help, unfortunately its not changing anything. I can post an image of itself that its gives on my mobile with firefox and chrome.
Mobile version on firefox and chrome
Mobile version on safari
i spend sometimes for searching about this and i found something , i hope it helpful :
checkout the link : https://dev.to/neshaz/how-to-make-all-browsers-understand-your-css-2a4e
To the bottom of my site, I have 3 divs that are meant to be lined up. They are in a container div and they only line up when the screen is resized. Can anyone offer a solution? Here is the Css and HTML code I've tried. The error is happening with .info1 any help would be greatly appreciated!
body{
height: 100%;
background-color: lightskyblue;
margin-left: 0%;
margin-right: 0%;
padding: 0%;
}
header img{
display: block;
margin: 0 auto;
width: 90%;
}
header h1{
text-align: center;
margin-left: 5%;
margin-right: 5%;
}
nav ul {
list-style-type: none;
margin: 0%;
padding: 0%;
}
nav li{
float: left;
margin-left: 13.5%;
padding-top: 1%;
padding-bottom: 2%;
}
li a {
text-decoration: none;
}
h1{
text-align: center;
}
.container{
height: 30%;
width: 80%;
margin-top: 2%;
margin-left: 10%;
padding: 1%;
margin-bottom: 3%;
}
.contxt{
width: 55%;
height: atuo;
color: black;
font-size: 1.2em;
}
.container img{
float:right;
width: 60%;
margin-left: 3%;
margin-bottom: 3%;
}
.condiv{
height: 600px;
width: 80%;
margin: 0 auto;
}
.info1{
display: inline-block;
height: auto;
width: 27%;
padding-left: 1%;
padding-right: 1%;
text-align: center;
float: left;
margin-left: 5%;
margin-top: 1%;
margin-bottom: 1%;
background-color: deepskyblue;
font-size: 1.2em;
}
.info1 img{
width:50%;
}
.info2{
height: auto;
width: 27%;
text-align: center;
float: left;
padding-left: 1%;
padding-right: 1%;
margin-left: 1%;
margin-top: 1%;
margin-bottom: 1%;
background-color: deepskyblue;
font-size: 1.2em;
}
.info2 img{
width:50%;
}
.info3{
height: auto;
width: 27%;
text-align: center;
float: left;
padding-left: 1%;
padding-right: 1%;
margin-left: 1%;
margin-top: 1%;
margin-bottom: 1%;
background-color: deepskyblue;
font-size: 1.2em;
}
.info3 img{
width:50%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="pch.css">
<title>Premier Choice Holidays</title>
</head>
<body>
<header>
<img src="logo.png" style="width:100%;" alt="png image of logo">
<nav>
<ul>
<li>Home</li>
<li>View Holidays</li>
<li>Admin</li>
<li>Credits</li>
<li>Wire Frames</li>
</ul>
</nav>
<img src="banner.png" alt="Image of suitecase on a world map" />
</header>
</body>
<main>
<h1>Welcome To Premier Choice Holidays</h1>
<div class="container">
<img src="safe-travel1.png" alt="Image of suite case.">
<div class="contxt">
<p>Welcome to Premier Choice Holidays! Its a great thing you found us! Now you can save £££ on expensive dream holidays! We are currently the most used and cheapest business used for finding great holiday deals. No matter what time of year it is we have a deal for you, even if its just for the weekend! We will make sure you have the holiday you have always dreamt of! All you need to do to start comparing prices is sign up to our website. We will also email you with deals we think you may like and hot offers that are on at the time!<br><br>If you need to get in touch with us please do not hesitate to do so, you can reach our email at pch#pchinfo.com, or ring us on #07898675398 </p>
</div>
</div>
<div class="largebox">
<div class="condiv">
<div class="info1">
<h3>Most Popular</h3>
<img src="america.png" alt=" American Flag.">
<p>Fly away to amreica in our most popular holiday deal ever!
For just £1000 you could be off to America with 2 people of your choice for a week of hot sun, parties, pools and so much more!</p>
<div class="img1">
<img src="4£.png" alt="img of ££££">
</div>
</div>
<div class="info2">
<h3>Fancy A Cruise?</h3>
<img src="cruise.png" alt="PNG image of a cruise ship.">
<p><br>We offer the best deals on Cruise holidays meaning you could save a fortune and be off on the holiday of a life time! Now for only £2000 sail away on an all inclusive party cruise packed with entertainment and 3 on board night clubs!</p>
<img src="4£.png" alt="image of ££££">
</div>
<div class="info3">
<h3>Just a Short One?</h3>
<img src="short.png" alt="image of suit case">
<p>Fancy a weekend away? Well what would you know we have deals for that too! Check out our weekend away to Amsterdam for only £300! Price includes Ferry, 3 nights hotel stay with food all paid for! </p>
<img src="three-pounds.png" alt="image of £££">
</div>
</div>
</main>
<div class="footer">
<p>Thank You! For visiting Premier Choice Holidays! Your #1 holiday providers!</p>
</div>
</body>
</html>
Use display:flex on your condiv.
Additionaly, you can set min-height / max-height to control the size not to have too much of empty space or overflow. You can also use media queries for different screen resolutions.
#media only screen and (min-device-width: 600px){
.condiv {
font-size: 12px;
min-height: 500px !important;
}
}
body{
height: 100%;
background-color: lightskyblue;
margin-left: 0%;
margin-right: 0%;
padding: 0%;
}
.condiv{
min-height: 600px;
width: 80%;
margin: 0 auto;
display:flex
}
.info1{
display: inline-block;
height: auto;
width: 27%;
padding-left: 1%;
padding-right: 1%;
text-align: center;
float: left;
margin-left: 5%;
margin-top: 1%;
margin-bottom: 1%;
background-color: deepskyblue;
font-size: 1.2em;
}
.info1 img{
width:50%;
}
.info2{
height: auto;
width: 27%;
text-align: center;
float: left;
padding-left: 1%;
padding-right: 1%;
margin-left: 1%;
margin-top: 1%;
margin-bottom: 1%;
background-color: deepskyblue;
font-size: 1.2em;
}
.info2 img{
width:50%;
}
.info3{
height: auto;
width: 27%;
text-align: center;
float: left;
padding-left: 1%;
padding-right: 1%;
margin-left: 1%;
margin-top: 1%;
margin-bottom: 1%;
background-color: deepskyblue;
font-size: 1.2em;
}
.info3 img{
width:50%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="pch.css">
<title>Premier Choice Holidays</title>
</head>
<body>
</body>
<main>
<div class="condiv">
<div class="info1">
<h3>Most Popular</h3>
<img src="america.png" alt=" American Flag.">
<p>Fly away to amreica in our most popular holiday deal ever!
For just £1000 you could be off to America with 2 people of your choice for a week of hot sun, parties, pools and so much more!</p>
<div class="img1">
<img src="4£.png" alt="img of ££££">
</div>
</div>
<div class="info2">
<h3>Fancy A Cruise?</h3>
<img src="cruise.png" alt="PNG image of a cruise ship.">
<p><br>We offer the best deals on Cruise holidays meaning you could save a fortune and be off on the holiday of a life time! Now for only £2000 sail away on an all inclusive party cruise packed with entertainment and 3 on board night clubs!</p>
<img src="4£.png" alt="image of ££££">
</div>
<div class="info3">
<h3>Just a Short One?</h3>
<img src="short.png" alt="image of suit case">
<p>Fancy a weekend away? Well what would you know we have deals for that too! Check out our weekend away to Amsterdam for only £300! Price includes Ferry, 3 nights hotel stay with food all paid for! </p>
<img src="three-pounds.png" alt="image of £££">
</div>
</div>
</main>
</body>
</html>
I am working on a page and I'm trying to make an image of an iphone be directly to the right of the header, paragraph and call to action (searchbar, searchbutton) like so:
But the image keeps getting pushed down into the next module.
What can I do to put the phone image in the right place?
#hero {
background-color: #62CE9C;
display: inline-block;
height: 600px;
margin: 0px;
padding-bottom: 100px;
padding-left: 70px;
padding-right: 70px;
padding-top: 100px;
width: 100%;
}
#herotext {
float: left;
}
#hero img {
float: left;
}
p {
color: #FFFFFF;
font-family: Open Sans;
font-size: 18px;
}
#savefoodimage {
float: right;
}
#savefoodtext {
float: right;
height: 300px;
width: 290px;
}
#savemoneyimage {
float: left;
}
#savemoneytext {
float: left;
height: 300px;
width: 330px;
}
#savetimeimage {
float: left;
}
#savetimetext {
float: left;
height: 300px;
width: 330px;
}
#searchbar {
background-color: #FFFFFF;
border: none;
border-radius: 8px;
font-size: 18px;
height: 40px;
padding-left: 10px;
width: 300px;
}
#searchbutton {
background-color: #28C787;
border: none;
border-radius: 8px;
color: #FFFFFF;
font-size: 18px;
height: 40px;
width: 180px;
}
#searchbutton:hover {
background-color: #00BE8B;
}
#tweetone {
background-color: #FFFFFF;
border-radius: 25px;
height: 108px;
margin: auto;
width: 750px;
}
#tweetone img {
float: left;
}
#tweetonetext {
float: left;
}
#tweettwo {
background-color: #FFFFFF;
border-radius: 25px;
height: 108px;
margin: auto;
width: 750px;
}
#tweetthree {
background-color: #FFFFFF;
border-radius: 25px;
height: 108px;
margin: auto;
width: 750px;
}
ul {
list-style-type: none;
}
#vocational {
background-color: #62CE9C;
display: inline-block;
height: 900px;
padding-bottom: 100px;
padding-left: 70px;
padding-right: 70px;
padding-top: 100px;
width: 100%;
}
#vocational h1 {
text-align: center;
}
#vocational p {
color: #62CE9C;
display: inline-block;
margin-left: 20px;
}
<!DOCTYPE html>
<html>
<head>
<link href="css/main.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
<div id="hero">
<h1>Make the Most of your Food With Pantree</h1>
<p>Pantree for iOS lets you search for recipes based on the ingredients you already have in your home.</p>
<form id="form">
<input id="searchbar" type="text" placeholder="yourname#email.com"/>
<input id="searchbutton" type="submit" value="Get Early Access" />
</form>
<img src="images/phone.png"/>
</div>
<div id="functions">
<img id="savemoneyimage" src="images/savemoney.png"/>
<div id="savemoneytext">
<h2>Save Money</h2>
<p>Pantree finds you recipes containing ingredients you already have in your home, saving you from unecessary trips to the grocery store.</p>
</div>
<img id="savefoodimage" src="images/savefood.png"/>
<div id="savefoodtext">
<h2>Save Food</h2>
<p>Pantree keeps track of expiration dates, alerting you when food will go stale so you can use it before it goes bad.</p>
</div>
<img id="savetimeimage" src="images/savetime.png"/>
<div id="savetimetext">
<h2>Save Time</h2>
<p>Pantree's built-in kitchen organizing system helps you monitor all of the food in your home, so figuring out what food you have is quick & easy.</p>
</div>
</div>
<div id="vocational">
<h1>These Folks Could Use Pantree Every Day</h1>
<ul>
<li>
<div id="tweetone">
<img src="images/tweetone.png"/>
<div id="tweetonetext">
<h3>Kat</h3>
<h3>#devicat</h3>
<p>I have no idea what to make for dinner. I am so bad at this game. <span class="hashtag">#adulting</span></p>
</div>
</div>
</li>
<li>
<div id="tweettwo">
<img src="images/tweettwo.png"/>
<h3>Jack Falahee</h3>
<h3>#RestingPlatypus</h3>
<p>Dear Mom, How do I organize my kitchen? Love, me</p>
</div>
</li>
<li>
<div id="tweetthree">
<img src="images/tweetthree.png"/>
<h3>mason ryan</h3>
<h3>#MasonTheManiac</h3>
<p>Something in my fridge smells really bad.... <span class="hashtag">#cantfindit</span></p>
</div>
</li>
</ul>
</div>
<div id="calltoaction">
<h1>Manage your Kitchen, Effortlessly</h1>
<p>Pantree makes it easy to find recipes, keep track of food, and organize your kitchen.</p>
<form id="form">
<input id="searchbar" type="text" placeholder="yourname#email.com"/>
<input id="searchbutton" type="submit" value="Get Early Access" />
</form>
</div>
</body>
</html>
Try this.
#hero {
float: left;
}
img {
display: block;
float: right;
}
How about using a two column layout?
in the below code the top property inside the id "#bad" is does not make any effect, can any one help me. it's made some effect when i used it with
some other codes.
html code :
<html>
<head>
<link rel="stylesheet" type="text/css" href="rise.css">
</head>
<body>
<div id="good">
<div id="vahid">
<div id="one">
<img src="image1.jpg" id="boom"><br><br><br><br><br>
<!--button-->
<img src="button.jpg" id="button"><br><br><br><br>
<!--icons-->
<span class="local">
<img src="img.jpg">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
</span><br><br><br><br>
<span class="local">
<img src="img4.jpg">
<img src="img5.jpg">
<img src="img6.jpg">
<img src="img7.jpg">
</span>
</div>
</div>
<div id="isnani">
<div id="third">
<p >
<span class="fourth">Dashboard</span>
<span class="fifth"> + New</span>
</p>
<!--<p class="fourth"> </p>
<p id="fort"><input type="text" placeholder="search your project here..." ></p>
<div id="jump"><img src="search.jpg" height="20px" width="10px"></div>-->
<p id="sixth"> Welcome to Flatkit</p>
<p id="seventh"> Bootstrap 4 Web App Kit With Angular js</p>
</div>
</div>
</div>
<div id="bad">
</div>
</body>
</html>
css :
#good{
width: 100%;
height: 100%;
}
#bad{
width: 15%;
height: 100%;
background-color: #023b3b;
top:-80%;
}
#vahid{
float: left;
width: 7%;
height: 100%;
background-color: #023b3b;
}
#isnani{
float: left;
width: 93%;
height: 100%;
background-color: bisque;
}
#one {
display:block;
background-color: #023b3b;
/* width:60px;
height: 867px;*/
}
#boom{
margin-top: 30%;
height: 5%;
width: 35%;
float: left;
padding-left: 20px;
}
.local img {
height: 2.5%;
width:30%;
margin :10px 0px 10px 20px;
}
/*isnani starts here*/
#third{ float:left;
width:100%;
height: 15%;
border-color:white;
border-style : solid;
background-color : white;
}
.fourth{
margin-left: 2%;
margin-top: 5%;
font-family: sans-serif;
}
.fifth{
color: #808080;
font-size: 80%;
font-weight: 800;
font-family: arial,sans-serif;
margin-left: 1%;
}
#sixth{
font-family: sans-serif;
font-size:150%;
color:#666666;
margin-top: 4%;
margin-left: 2%;
/*top: -2%;/
/* line-height: 3%; */
}
#seventh{
position: absolute;
top: 11%;
color: #808080;
font-family: sans-serif;
font-size: 80%;
margin-left: 1.8%;
margin-top: 1.5%;
/*line-height: 3%;*/
}
#fort{
float: right;
margin-top: -65px;
margin-right: 80px;
}
#button{
margin-left: 80%;
width: 20%;
hyphens: 20%;
}
in the above code the top property inside the id "#bad" is does not make any effect, can any one help me. it's made some effect when i used it with
some other codes.
For properties top/bottom/left/right to take effect element must be positioned non-statically - have position relative/absolute/fixed.
Apply position to your #bad
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 6 years ago.
I know this question has been frequently asked but I can never seem to get it to work. Can you tell me what's wrong?
I have three divs within a #container div, which I want to centre side by side. The #container is 1000px wide (I want to keep it that way). Here is my code:
#container {
margin-top: 500px;
position: absolute;
width: 1000px;
}
.related-article {
background-color: #D6A400;
display: inline-block;
width: 230px;
height: 300px;
border-radius: 30px;
margin-bottom: 0px;
}
.related-article > img {
width: 200px;
height: 150px;
border-radius: 15px;
margin-top: 15px;
}
.related-article > h3 {
font-size: 15px;
width: 180px;
text-align: justify;
margin-left: auto;
margin-right: auto;
color: #f1f1f1;
font-family: Abel, serif;
margin-bottom: none;
}
a {
text-decoration: none;
}
#right {
float: right;
}
#left {
float: left;
}
#center {
margin-left: 385px;
margin-right: 385px;
}
<div id="container">
<h2>Here's what you'll do!</h2>
<div id="left">
<a href="#" class="related-article first" align="middle">
<img src="download.jpeg" alt="T-rex">
<h3>Constructing amazing fossils you never even dreamed of</h3>
</a>
</div>
<div id="center">
<a href="#" class="related-article second" align="middle">
<img src="fossil-fish-10-lg.jpg" alt="Fish">
<h3>Studying ancient marine biology</h3>
</a>
</div>
<div id="right">
<a href="#" class="related-article third" align="middle">
<img src="fossil.turtle2.jpg" alt="Turtle">
<h3>Uncovering the world's greatest mysteries</h3>
</a>
</div>
</div>
All help would be gladly appreciated.
You can do that quite simple using flexbox:
#container {
/* margin-top: 500px; */
width: 1000px;
margin: 0 auto;
}
.related-article {
background-color: #D6A400;
display: inline-block;
border-radius: 30px;
margin-bottom: 0px;
}
.related-article > img {
width: 200px;
height: 150px;
border-radius: 15px;
margin-top: 15px;
}
.related-article > h3 {
font-size: 15px;
width: 180px;
text-align: justify;
margin-left: auto;
margin-right: auto;
color: #f1f1f1;
font-family: Abel, serif;
margin-bottom: none;
}
a {
text-decoration: none;
}
}
#container {
width: 1000px;
}
.related-article {
background-color: #D6A400;
display: inline-block;
width: 230px;
height: 300px;
border-radius: 30px;
margin-bottom: 0px;
}
.related-article > img {
width: 200px;
height: 150px;
border-radius: 15px;
margin-top: 15px;
}
.related-article > h3 {
font-size: 15px;
width: 180px;
text-align: justify;
margin-left: auto;
margin-right: auto;
color: #f1f1f1;
font-family: Abel, serif;
margin-bottom: none;
}
a {
text-decoration: none;
}
.box {
margin-right: 10px;
width: 230px;
height: 300px;
}
.flex-container {
display: flex;
align-items: center;
justify-content: center;
}
<div id="container">
<h2>Here's what you'll do!</h2>
<div class="flex-container">
<div id="left" class="box">
<a href="#" class="related-article first" align="middle">
<img src="download.jpeg" alt="T-rex">
<h3>Constructing amazing fossils you never even dreamed of</h3>
</a>
</div>
<div id="center" class="box">
<a href="#" class="related-article second" align="middle">
<img src="fossil-fish-10-lg.jpg" alt="Fish">
<h3>Studying ancient marine biology</h3>
</a>
</div>
<div id="right" class="box">
<a href="#" class="related-article third" align="middle">
<img src="fossil.turtle2.jpg" alt="Turtle">
<h3>Uncovering the world's greatest mysteries</h3>
</a>
</div>
</div>
</div>
A solution using display: flex. Read more about flexbox here
Apply display: flex to the container
Add flex: 1 to all the child's which are to be centered horizontally.
h2 {
margin-top: 500px;
}
#container {
position: absolute;
width: 1000px;
display: flex;
text-align: center;
}
#container div {
flex: 1;
}
.related-article {
background-color: #D6A400;
display: inline-block;
width: 230px;
height: 300px;
border-radius: 30px;
margin-bottom: 0px;
}
.related-article > img {
width: 200px;
height: 150px;
border-radius: 15px;
margin-top: 15px;
}
.related-article > h3 {
font-size: 15px;
width: 180px;
text-align: justify;
margin-left: auto;
margin-right: auto;
color: #f1f1f1;
font-family: Abel, serif;
margin-bottom: none;
}
a {
text-decoration: none;
}
<h2>Here's what you'll do!</h2>
<div id="container">
<div id="left">
<a href="#" class="related-article first" align="middle">
<img src="download.jpeg" alt="T-rex">
<h3>Constructing amazing fossils you never even dreamed of</h3>
</a>
</div>
<div id="center">
<a href="#" class="related-article second" align="middle">
<img src="fossil-fish-10-lg.jpg" alt="Fish">
<h3>Studying ancient marine biology</h3>
</a>
</div>
<div id="right">
<a href="#" class="related-article third" align="middle">
<img src="fossil.turtle2.jpg" alt="Turtle">
<h3>Uncovering the world's greatest mysteries</h3>
</a>
</div>
</div>
Remove all the floats and replace them with :
display: inline-block;
Also, as much as i have tried, with that spacing between divs, you wont be able to display them the right way. Make the space between the #left, #center and #right divs less than 50px, or work with percentage(%).
You may use display:table for that..
You can have Parent div with style
display:table
and your 3 child divs as
display:table-cell
#container {
margin-top: 500px;
position: absolute;
width: 1000px;
}
.related-article {
background-color: #D6A400;
display: inline-block;
width: 230px;
height: 300px;
border-radius: 30px;
margin-bottom: 0px;
}
.related-article > img {
width: 200px;
height: 150px;
border-radius: 15px;
margin-top: 15px;
}
.related-article > h3 {
font-size: 15px;
width: 180px;
text-align: justify;
margin-left: auto;
margin-right: auto;
color: #f1f1f1;
font-family: Abel, serif;
margin-bottom: none;
}
a {
text-decoration: none;
}
#container {
margin-top: 500px;
position: absolute;
width: 1000px;
display: table;
}
.related-article {
background-color: #D6A400;
display: inline-block;
width: 230px;
height: 300px;
border-radius: 30px;
margin-bottom: 0px;
}
.related-article > img {
width: 200px;
height: 150px;
border-radius: 15px;
margin-top: 15px;
}
.related-article > h3 {
font-size: 15px;
width: 180px;
text-align: justify;
margin-left: auto;
margin-right: auto;
color: #f1f1f1;
font-family: Abel, serif;
margin-bottom: none;
}
a {
text-decoration: none;
}
#left,
#right,
#center {
display: table-cell;
}
#center {
margin-left: 385px;
margin-right: 385px;
}
h2 {
display: table-row;
}
<div id="container">
<h2>Here's what you'll do!</h2>
<div id="left">
<a href="#" class="related-article first" align="middle">
<img src="download.jpeg" alt="T-rex">
<h3>Constructing amazing fossils you never even dreamed of</h3>
</a>
</div>
<div id="center">
<a href="#" class="related-article second" align="middle">
<img src="fossil-fish-10-lg.jpg" alt="Fish">
<h3>Studying ancient marine biology</h3>
</a>
</div>
<div id="right">
<a href="#" class="related-article third" align="middle">
<img src="fossil.turtle2.jpg" alt="Turtle">
<h3>Uncovering the world's greatest mysteries</h3>
</a>
</div>
</div>
remove float from and add display: inline-block to all three, then add text-align: center; to the container.
Try this, and add float:left to your right,left and center div and reduce your margin left and right of center div.
#right {
float: left;
}
#left {
float: left;
}
#center {
margin-left: 85px;
margin-right: 85px;
float:left;
}
Instead adding center, left and right. Use ul and set the width of li in percentage. It will improve the code and reduce the css code.
The codepen url is http://codepen.io/SESN/pen/pbbjrb
CSS
#container { width: 100%; }
.ulContainer { margin: 0px auto; list-style: none; width: 80%; }
.ulContainer li { width: 33.33%; float: left; }
HTML
<div id="container">
<h2>Here's what you'll do!</h2>
<ul class="ulContainer">
<li>
<a href="#" class="related-article first" align="middle">
<img src="download.jpeg" alt="T-rex">
<h3>Constructing amazing fossils you never even dreamed of</h3>
</a>
</li>
<li>
<a href="#" class="related-article second" align="middle">
<img src="fossil-fish-10-lg.jpg" alt="Fish">
<h3>Studying ancient marine biology</h3>
</a>
</li>
<li>
<a href="#" class="related-article third" align="middle">
<img src="fossil.turtle2.jpg" alt="Turtle">
<h3>Uncovering the world's greatest mysteries</h3>
</a>
</li>
</ul>
</div>