been struggling for some time now.
I'm trying to give my welcome-section the same size as the viewport, but I just can't seem to get it done, whatever I do...
Then also, the bottom is hidden under the safari menu when I check the mobile version. I used the same formula as I used before on another project, but it doesn't work here.
Can somebody clarify, please?
Many thanks in advance!
body {
background: linear-gradient(to top right, grey, black);
height: 100%;
}
#navbar {
position: fixed;
width: 100%;
display: block-inline;
top: 0;
left: 0;
background: #db0b15;
}
.navbar {
text-align: right;
margin-right: 10px;
}
.navbar-item {
display: inline;
padding-left: 30px;
color: white;
font-size: 20px;
text-decoration: none;
text-align: center;
}
welcome-section {
height: 100%;
width: 100%;
}
a {
color: white;
text-decoration: ;
text-align: center;
}
h1 {
padding-top: 150px;
text-align: center;
color: white;
}
p {
color: white;
text-align: center;
}
.subheader {
font-size: 30px;
text-decoration: underline;
padding-top: 50px;
padding-bottom: 20px;
}
.project-list {
text-align: center;
display: grid;
grid-template-columns: 200px 200px;
grid-template-rows: 150px 150px;
grid-column-gap: 70px;
grid-row-gap: 50px;
justify-content: center;
align-content: center;
}
.project-img {
height: 120%;
width: 120%;
}
.icon {
padding-right: 20px;
padding-left: 20px;
}
.profile-link: {
color: blue;
}
#welcome-section {
height: 100vh;
}
#media only screen and (max-width: 600px) {
.project-img {
max-width: 100%;
max-height: 100%;
}
.project-list {
text-align: center;
display: grid;
grid-template-columns: 160px 160px;
grid-template-rows: 120px 120px;
grid-column-gap: 5px;
grid-row-gap: 5px;
justify-content: center;
align-content: center;
margin-right: 10px;
}
#media screen and (max-width: 768px) {
_::-webkit-full-page-media,
_:future,
:root .safari_only {
padding-bottom: 170px; //resize
}
}
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/1c24d3937a.js" crossorigin="anonymous"></script>
<title id="title">Personal Portfolio - Iwan Van den Broeck</title>
</head>
<body id="body">
<navbar id="navbar">
<ul class="navbar">
<li class="navbar-item">Welcome</li>
<li class="navbar-item">Projects</li>
<li class="navbar-item">Contact</li>
</ul>
</navbar>
<welcome-section id="welcome-section" class="welcome-section">
<h1>Welcome to my Portfolio.<br><br>I am Iwan<br><br> and I'm a Web Developer<br><br></h1>
</welcome-section>
<projects-section id="projects">
<p class="subheader">These are some of my projects:</p>
<project-list class="project-list">
<a id="tribute-page" class="project-tile center" href="https://codepen.io/iwan-van-den-broeck/full/YzZoXvY" target="blank" alt="link to Steve Jobs tribute page"><img src="https://drive.google.com/thumbnail?id=1pTGPtU4oKYReRbMnAPkeC1ll-Nor0dSo" alt="screenshot of tribute page" class="project-img"></a>
<a id="survey-form" class="project-tile center" href="https://codepen.io/iwan-van-den-broeck/full/mdWZNPd" target="blank" alt="link to AirAsia customer satisfaction survey"><img src="https://drive.google.com/thumbnail?id=1Sclylussw2JNXSSlD3qs7xABHVKx_0LV" alt="screenshot of survey form" class="project-img"></a>
<a id="product-landing-page" class="project-tile center" href="https://codepen.io/iwan-van-den-broeck/full/NWjKdre" target="blank" alt="link to Apple landing page"><img src="https://drive.google.com/thumbnail?id=1RY4MuLY8knZk6pogcMwApjJ-fYOtTUCu" alt="screenshot of landing page" class="project-img"></a>
<a id="technical-documentation-page" class="project-tile center" href="https://codepen.io/iwan-van-den-broeck/full/BaRaRWp" target="blank" alt="link to JS technical documentation page"><img src="https://drive.google.com/thumbnail?id=1Pxp17-rmWZqD0or3lmF2UvtPbKuCyC6l" alt="screenshot of technical documentation page" class="project-img"></a>
</project-list>
</projects-section>
<contact-section id="contact">
<p class="subheader">Contact me:</p>
<p>Let's do some projects together! Contact me for more information.</p>
<p id="contact-links">
<p>
<i class="fas fa-phone-square-alt icon"> Call me</i>
<i class="fas fa-envelope-square icon"> Email me</i>
<i class="fab fa-linkedin icon"> Linkedin</i>
</p>
<p>Click here to visit my Profile
</p>
</contact-section>
</body>
</html>
You could set your section to height: 100vh; to make it the full height of your viewport.
In combination with display: block; it will work.
welcome-section {
height: 100vh;
width: 100%;
display: block;
}
Related
In the following image which is my implementation, I have two sets of photos, the first group is uploading ones, and the second groups are the uploaded ones.
In reality, right after the last uploading image, the second group should start.
I started style with available photos, later adding uploading images stamp was added, and codes are becoming spaghetti.
I looking for a way to make the asked scenario. Any idea?
My simplified HTML codes is (beside the html comments, I put some comments with ** here for explanation)
<div class="gallery-wrapper">
<ng-container *ngFor="let file of progressFiles; let i = index;">
<div class="frame">
<div class="photo-wrapper">
<img [src]="sanitizer.bypassSecurityTrustResourceUrl(file.src)" alt="dragged images" width="150" height="150">
</div>
<div class="waiting-frame">
<div *ngIf="heading === 'VIDEO'" class="loader">Loading...</div>
<div *ngIf="heading === 'PHOTO'" class="loader">Loading...</div>
</div>
</div>
</ng-container>
<!-- this part read medias -->
<div *ngIf="mediaContent && mediaContent.length">
<!-- draged and dropped medias -->
<div dnd-sortable-container [sortableData]="mediaContent">
<ng-container *ngFor="let media of mediaContent ; let i = index">
<div dnd-sortable [sortableIndex]="i" class="frame" (click)="openModal(i, mediaEdit)">
<div class="photo-wrapper">
<img *ngIf="media.thumbnail" src="{{media.thumbnail}}" alt="dragged images">
</div>
<div class="modifiers hidden-sm hidden-xs">
<div [ngClass]="{'icon vg-icon-play_arrow': heading == 'VIDEO'}"></div>
<div class="sprite sprite-rotate adjust2" tooltip="{{ 'ROTATE' | translate }}" placement="top" tooltipAnimation="true"></div>
<div class="sprite sprite-editor adjust" tooltip="{{ 'EDIT' | translate }}" placement="top" tooltipAnimation="true"></div>
<div class="sprite sprite-garbage-bin-black" tooltip="{{ 'DELETE' | translate }}" placement="top" tooltipAnimation="true" (click)="deleteMedia($event, i)"></div>
<div class="sprite sprite-exclamation adjust3" tooltip="{{ 'MISSING_DESCRIPTION' | translate }}" placement="top" tooltipAnimation="true" *ngIf="!media.description.fr && !media.description.en" (click)="stopPropagation($event)"></div>
</div>
<div class="modifiers visible-sm-inline-block visible-xs-inline-block">
<div [ngClass]="{'icon vg-icon-play_arrow': heading == 'VIDEO'}"></div>
<div class="sprite sprite-rotate adjust2"></div>
<div class="sprite sprite-editor adjust"></div>
<div class="sprite sprite-garbage-bin-black"
(click)="deleteMedia($event, i)"></div>
<div class="sprite sprite-exclamation adjust3" tooltip="{{ 'MISSING_DESCRIPTION' | translate }}" placement="top" tooltipAnimation="true"
*ngIf="!media.description.fr && !media.description.en" (click)="stopPropagation($event)"></div>
</div>
</div>
</ng-container>
</div>
</div>
</div>
And here is my SASS codes using flex-box technique.
.gallery-wrapper {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
flex-direction: row;
margin-left: -5px;
margin-right: -5px;
.frame {
margin: 10px;
border-radius: 6px;
border: 1px solid $gray;
max-width: 152px;
height: 194px;
overflow: hidden;
position: relative;
cursor: move !important;
display: inline-block;
.photo-wrapper {
width: 100%;
height: 150px;
overflow: hidden;
border-bottom: 1px solid $gray;
display: flex;
align-items: center;
background-color: $gray-light;
img {
display: inline-block;
width: 100%;
height: auto;
max-height: 150px;
pointer-events: none;
}
}
.modifiers {
display: inline-block;
position: relative;
padding: 8px 20px;
}
.waiting-frame {
display: inline-block;
text-align: center;
position: absolute;
background-color: $gray-base;
opacity: 0.6;
bottom: 0;
left: 0;
right: 0;
width: 150px;
height: 194px;
border-radius: 6px;
.loader,
.loader:after {
border-radius: 50%;
width: 10em;
height: 10em;
}
.loader {
margin: 50px auto;
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid rgba(255, 247, 0, 0.2);
border-right: 1.1em solid rgba(255, 247, 0, 0.2);
border-bottom: 1.1em solid rgba(255, 247, 0, 0.2);
border-left: 1.1em solid $brand-primary;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
#-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
}
}
}
I have a responsive fixed top menu that opens after clicking on the Menu icon. Then I would like to hide it after clicking on one of the menu items. Otherwise it covers part of the section that slides up.
I have used the code from this page: http://www.w3schools.com/howto/howto_js_topnav.asp
What do I have to change to the code to hide the list after clicking on one of the menu items?
<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
ul.topnav li a:hover {background-color: #555;}
ul.topnav li.icon {display: none;}
#media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
#media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<ul class="topnav" id="myTopnav">
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="icon">
☰
</li>
</ul>
<div style="padding-left:16px">
<h2>Responsive Topnav Example</h2>
<p>Resize the browser window to see how it works.</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
I have custom checkboxes, and the content is jumping when I click between checked and unchecked states. How can I stop this from happening? Here's my code:
CSS:
input[type=checkbox] {
display: none;
}
label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 18px;
background-color: rgba(225, 225, 225);
border-radius:4px;
border:1px solid #cecece;
}
input[type=checkbox]:checked + label:before {
content: "\2713";
font-size: 15px;
color: red;
text-align: center;
line-height: 15px;
}
HTML:
<input id="checkbox1" type="checkbox" class="checkbox" name="lists[Fortune Daily]" />
<label for="checkbox1"><img class="list" src="http://email-media.s3.amazonaws.com/fortune/fortunef_55x50.png" /> <span>Fortune Daily</span>
</label>
Thank you in advance!
It's no problem to correct the jumping. See the below code:
input[type=checkbox] {
display: none;
}
label {
font-size: 15px;
vertical-align: top;
}
label:before {
content: "\2713";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 18px;
background-color: rgba(225, 225, 225);
border-radius:4px;
border:1px solid #cecece;
font-size: 15px;
color: white;
text-align: center;
line-height: 15px;
}
input[type=checkbox]:checked + label:before {
color: red;
}
<input id="checkbox1" type="checkbox" class="checkbox" name="lists[Fortune Daily]" />
<label for="checkbox1"><img class="list" src="http://email-media.s3.amazonaws.com/fortune/fortunef_55x50.png" /> <span>Fortune Daily</span>
</label>
However, I wouldn't recommend you to continue with this solution, because it's seems to be impossible to make a correct vertical alignment of the elements here. For example, instead of label with 'before' you could realize it by an outside div with display:table property and three inside element with display:table-cell. At least you will have a full control on elements' placement not dependent on font size.
I am trying to make an image respond to the browser size, so that when the browser is smaller, the image responds so that there is no scrolling involved. I found a similar question here How can I resize an image dynamically with CSS as the browser width/height changes?, but I'm not able to make that solution work. What am I missing?
I'm including my code below - I am using Wordpress, so it puts a "p" tag around my image automatically, wrapping my image in a paragraph. Also, I'm not sure if I'm including too much code for this purpose, but I wanted to make sure it was all there in case there's an error in a strange place that could be causing the problem...
Here is my html:
<body>
<div id="pop_up_page">
<div class="content_well_pop">
<div class="content_pop">
<div class="portfolio_workspace_9">
<h2>Here's the Header</h2>
</div>
<div class="portfolio_workspace_8">
<p>
<img src="heres_the_image"/>
</p>
</div>
</div>
</div>
</div>
</body>
Here's my CSS:
body {
background-attachment: fixed;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0;
height: 100%;
}
#pop_up_page {
background-attachment: fixed;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0;
height: 100%;
.content_well_pop {
left: 0;
width: 100%;
}
.portfolio_workspace_9 {
width: 1000px;
margin: 15px 0 0 0px;
position: relative;
float: left;
display:block;}
.portfolio_workspace_8 {
width: 1000px;
margin: 0px 0 50px 0px;
position: relative;
float: left;
height: auto;
display:block;}
p{font-family: "Franklin Gothic Book";
font-size: 15px;
color: #757372;
display: block;
}
.portfolio_workspace_8 img {
margin-left: auto;
margin-right: auto;
display: block;
max-width: 100%;
height: auto;
}
Thanks
this css rule here:
.portfolio_workspace_8 {
width: 1000px;
margin: 0px 0 50px 0px;
position: relative;
float: left;
height: auto;
display:block;
}
You are specifiying a width on the parent container of the image. Change it to max-width instead of width.
Here is an javascrpt-free, crossbrowser-stable solution you are looking for. I have implemented it in past on that website: http://www.gardinenhaus-morgen.de/.
HTML:
<html>
<body>
<div id="page-wrapper">
<div id="inner-wrapper">
<!-- your content here -->
</div>
</div>
<div id="bg">
<div>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<img alt="background" src="<bild>" />
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
CSS:
#bg div
{
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
}
#bg td
{
vertical-align: middle;
text-align: center;
}
#page-wrapper
{
position: absolute;
top: 0;
left: 0;
z-index: 70;
overflow: auto;
width: 100%;
height: 100%;
}
#inner-wrapper
{
margin: 30px auto;
width: 1000px;
}
I am working with a to client fix a problem on a single page. On all pages, the footer content is positioned and displays properly. However, on this page, when viewed in IE7 the footer content moves up into the body area. The only difference between this page and all the other is the presence of a WooFoo contact form.
I have tried a zillion different ways to bump that content down, but it will not respond to padding or margin adjustments.
Here is the HTML:
<div id="footer">
<div class="width">
<ul class="footerNav">
<li><a class="bFB" href="http://www.facebook.com/pages/Charlotte-NC/The-Idea-People/124178504825" target="_blank" title="The Idea People Charlotte web design facebook">FaceBook</a></li>
<li><a class="bTW" href="http://twitter.com/theideapeople" target="_blank" title="The Idea People Charlotte web design twitter">Twitter</a></li>
<li><a class="bEM" href="http://feedburner.google.com/fb/a/mailverify?uri=theideapeople" target="_blank" title="The Idea People Charlotte web design email">FeedBurner</a></li>
<li><a class="bRSS" href="http://feeds.feedburner.com/theideapeople" target="_blank" title="The Idea People Charlotte web design rss">RSS</a></li>
</ul>
<br class="clear" />
<ul class="termNav">
<li>Terms of Use |</li>
<li>Privacy Policy</li>
</ul>
<p class="copyright">©2010 The Idea People. All Rights Reserved.</p>
<p class="company">Charlotte, NC web design, graphic design and internet marketing</p>
<div id="address"> <strong>The Idea People</strong><br />
4424 Taggart Creek Rd., Suite 111<br />
Charlotte, NC 28208 </div>
<div id="phone"> <strong>T</strong> 704.398.4437<br />
<strong>F</strong> 704.398.4438<br />
<strong>E</strong> ideas#theideapeople.com </div>
<br class="clear"/>
</div>
</div>
Here is the CSS:
#footer { clear: both; background: url(../images/bg_footer.png) 0 0 no-repeat; padding: 10px 0 76px; color: #ccc; font-size: 14px; font-weight: bold; }
#footer .width { position: relative; margin: 0 auto; width: 960px; }
.footerNav { width: 300px; height: 30px; font-size: 15px; position: relative; top: 5px; left: 770px; }
.footerNav li { position:relative; float:left; margin:0; }
.footerNav li a { color: #fff; display: block; text-decoration: none; font-weight: bold; text-indent: -9999px; }
.footerNav li a.bRSS { background: url(../images/icon-rss.png) 0 0 no-repeat; width: 28px; height: 28px; padding-left: 26px; }
.footerNav li a.bFB { background: url(../images/icon-facebook.png) 0 0 no-repeat; width: 28px; height: 28px; padding-left: 26px; }
.footerNav li a.bTW { background: url(../images/icon-twitter.png) 0 0 no-repeat; width: 28px; height: 28px; padding-left: 26px; }
.footerNav li a.bEM { background: url(../images/icon-email.png) 0 0 no-repeat; width: 28px; height: 28px; padding-left: 26px; }
Any help in resolving this will be greatly appreciated!
Thanks.
The .footerNav element is causing overflow and busting the layout. I even get horizontal scrollbars on my machine, on all browsers.
The following CSS seems to fix it:
.footerNav
{
/* Add clear and float
*/
clear: left;
float: right;
font-size: 15px;
height: 30px;
top: 5px;
/* Delete these 3
position: relative;
left: 770px;
width: 300px;
*/
}