I've made a page using Bootstrap. I made a flexible navbar and it looks great in Mozilla.
Whereas when I use Google Chrome, this happens
Why is this? And what is the solution to this?
/* bootstrap 3 helpers */
.navbar-form input,
.form-inline input {
width: auto;
position: absolute;
}
#nav.affix {
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
/* Create a medium height at 40px */
.navbar-md {
min-height: 40px
}
.navbar-md .navbar-brand,
.navbar-md .navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px
}
.navbar-md .navbar-brand {
height: 40px
}
.navbar-md .navbar-toggle {
margin: 6px 12px 6px 0px;
padding: 6px 7px 6px 7px;
}
.navbar-md .navbar-toggle .icon-bar {
width: 19px;
}
.container#slider {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.container-full#headerC {
padding: 15px;
background-color: #8F1925;
margin-top: 0px;
}
/* RESPONSIVE HEADER*/
.navbar-header {
background-image: url("bootstraplogo.png", "bootstraplogoslice1.png") background-repeat: no-repeat, repeat-x;
background-position: center;
}
#media only screen and (min-width: 479px) and (max-width: 991px) {
.navbar-header {
background-size: auto auto;
}
.navbar-header {
height: 45px;
}
}
#media only screen and (max-width: 479px) {
.navbar-header {
background-size: auto 50px, 1px 50px;
}
.navbar-md#header {
height: 50px;
}
}
/* RESPONSIVE HEADER*/
.container-header {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
.text-center {
}
p#headerP {
display: inherit;
padding: 30px 0 10px;
text-align: center;
text-shadow: 1px 1px 2px #76141D;
font-family: "Josefin Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 5em;
font-weight: 700;
line-height: normal;
color: #fff;
}
p#subheader {
display: inherit;
margin: 0;
padding: 0 0 40px;
text-align: center;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
text-transform: uppercase;
font-size: 1.25em;
font-weight: 400;
letter-spacing: 3px;
color: #E72635;
}
.p img {
float: left;
width: 100px;
height: 100px;
background: #555;
}
/* */
/* Custom container */
.container-full {
margin: 0 auto;
width: 100%;
}
<head>
<title>The University Digest</title>
<!-- Bootstrap Core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/business-casual.css" rel="stylesheet">
<link href="css/menu.css" rel="stylesheet">
<!-- Fonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<div class="container-full" id="headerC">
<header class="masthead">
<p id="headerP">The University Digest</p>
<p id="subheader">The Official Student Publication of Western Mindanao State University</p>
</header>
</div>
<!-- Navigation -->
<div id="nav">
<div class=" navbar-custom navbar navbar-inverse navbar-md">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand " href="#">Menu</a>
</div>
<div class="navbar-collapse collapse navbar-inverse-collapse navbar-md">
<ul class="nav navbar-nav ">
<li>Home
</li>
<li class="dropdown">
Articles <b class="caret"></b>
<ul class="dropdown-menu">
<li>Article
</li>
<li>Comics
</li>
<li>Editorial Cartoon
</li>
<li>Uncensored
</li>
</ul>
</li>
<li class="dropdown">
Publications<b class="caret"></b>
<ul class="dropdown-menu">
<li>Newsletters
</li>
<li>Magazine
</li>
<li>Tejido
</li>
</ul>
<li>Applications
</li>
<li class="dropdown">
The Staff<b class="caret"></b>
<ul class="dropdown-menu">
<li>Editorial Board
</li>
<li>By-Laws
</li>
<li>Contacts
</li>
</ul>
<li>WMSU Portal
</li>
<li>Log In
</li>
</li>
</ul>
</ul>
</div>
</div>
</div>
I have a feeling it has something to do with the min-width thing, but I've tried manipulating it and I can't figure it out
Include Nicholas Gallagher's normalize CSS file before your other files and it will effectively reset browser preset padding/margin value, allowing them to adopt the same starting point. Do this by adding:
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
in the <head> before your other CSS files.
An alternate solution is to use YUI reset library, instead. Do this by adding:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
in the <head> before your other CSS files.
Either one of them will allow for easier cross-browser compatibility when writing CSS.
EDIT
As was suggested subtly with a downvote, a CSS reset ought to be included. For trouble shooting sake AND to see if one CSS reset may be better, I would try one and then the other. In any event, you'll learn how each helps in greater detail.
That being said, I researched some more and a similar case has been documented as being a Chrome bug (see here: https://superuser.com/questions/803601/text-size-suddenly-got-bigger-on-all-sites-on-google-chrome/803650#803650). Yes, browsers do render differently (not much, but enough to throw a designer off) and resetting CSS have been produced, but also try running your website in Google Chrome Canary. It contains Chrome's newest features. If it runs as intended in Canary, that I would carry on as you were as those changes ought to eventually make their way over to Chrome.
What may also work is adding this to your CSS:
pre,
code,
kbd,
samp,
tt{
font-family:monospace,monospace;
font-size:1em;
}
These are elements that typically default to a monospace type-face in most browsers. The first of the two attributes pertains specifically to webkit based browsers. Let me know if this works.
EDIT 2
Add this to your css and rewrite your classes with their respective font sizes. It's more of a hack and I discourage it, but it could help:
#media screen and (-webkit-min-device-pixel-ratio:0) {
Body or other target {
font-size: some px;
}
}
See if using a web-safe font like arial in both browsers renders different sizes. Sometime custom ones won't work the same.
I found it! :)
.navbar-nav {
text-transform: uppercase;
font-weight: 400;
letter-spacing: 0.8px;
}
The letter-spacing was the culprit. Thank you for the help #mijopabe.
Related
using bootstrap grid for responsive design, but when screen size is reduced, the footer is lost, and one can't move down page. shown below is why.html page plus styling from css file and scss file.
my attempts to fix this have been:
to look for some syntax problem in css file, and i changed background image from body to html to no avail. any help appreciated. https://jsfiddle.net/eojcam/htkxnywL/7/
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" href="images/favicon_nylon.ico" type="image/x-icon" />
<title>why</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- My styles for project0 -->
<link rel="stylesheet" href="css/styles_p0.css">
<!-- My sass styles for project0 -->
<link rel="stylesheet" href="css/variable_p0.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg fixed-top navbar-dark">
<a class="navbar-brand" href="index.html">Home</a>
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="why.html">Why</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="examples.html">Examples</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<h1></h1>
<h2>Drop That Pick!</h2> <!-- use of unicode for emoji -->
<p class="header_p">It's gonna happen anyway...đ</p>
</header>
<section class="join">
<div class="container">
<div class="row">
<div class="col">
<p>Several years ago, after returning from a position as Orchestral Guitarist on Royal Caribbean Cruise
Lines ship the "Monarch of the Seas,"</p>
<p>I decided to take some Classical Guitar lessons with a private
teacher. I learned how to play the guitar without a pick...</p>
...revealing some new possibilities.
Like playing Walking Bass Lines,
Chords, and Melody all at once!
</div>
</div>
</div>
</section>
<section class="join">
<div class="container">
<div class="row">
<div class="col">
<table>
<tr>
<th>Finger Style</th>
<th>Pick</th>
</tr>
<tr>
<td>Thumb and Fingers work independently.</td>
<td>Only one attack possible.</td>
</tr>
<tr>
<td>Invented first đ (technique has been developed for longer time.)</td>
<td>Reliance, such that if you drop it, (or don't have one),
means you are "out of business!"</td> <!--use of table -->
</tr>
</table>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<p id="footer_p">Copyright Š 2020 Joe Austin Mcintosh. All rights reserved.</p> <!-- id used -->
</div>
</footer>
</body>
</html>
css:
body{
padding-top:5rem;
background:url(/Users/king/proj_0/images/nylon_string_original.JPG) no-repeat center center fixed;
background-size: cover;
overflow: hidden;
color: #ffffff;
{box-sizing: border-box;}
}
div {
padding: 2px;
text-align: center;
}
h1, h2, h3, h4 {
color: #FFFF00;
}
h3 {
margin-top: 0;
margin-bottom: 0;
}
header {
margin-left: 1%;
margin-bottom: 1%;
}
p {
margin-bottom: 0;
}
table {
margin: 0 auto 0 auto;
border: 2px solid #ffffff;
border-collapse: collapse;
width: 80%;
}
th, td {
border: 1px solid #ffffff;
padding: 5px;
text-align: center;
}
th {
background-color: lightgray;
color: #6D2E0D;
}
ul {
list-style: none;
}
.header_p { /* use of class*/
text-align:center;
text-shadow:5px 5px 10px #ffffff;
color: #FFFF00;
}
.join {
padding:2px;
margin-top: -20px;
text-align: center;
}
.row > div {
padding-top:5rem;
color: #ffffff;
}
#media print {
.screen_only {
display: none;
}
}
.section_d {
padding: 2px;
margin-bottom: 0px;
font-family: Palatino, serif;
text-align:center;
}
#a_examples {
color: #ffffff;
}
#footer_p { /* use of id */
font-family: cursive;
padding-top:2px;
padding-left:4px;
padding-right: 2px;
margin-top: 0;
text-align:center;
text-shadow:5px 5px 10px #ffffff;
color: #FFFF00;
}
#p_examples {
text-align: center;
}
#media (min-width: 500px) { /* media query use */
h1::before {
content: "Finger Style Guitar Club";
}
}
#media (max-width: 499px) {
h1::before {
content: "Finger Style!";
}
}
scss:
$cap: small-caps; /* variable use*/
ul {
font-variant: $cap;
}
div {
ul { /* use of nesting*/
li a {
color: #ffffff;
}
}
}
%style { /* inheritance use */
border: 1px solid black;
padding: 1px;
margin: 0px;
}
.full_name {
#extend %style;
color: blue;
}
.age {
#extend %style;
color: blue;
}
.playing_style {
#extend %style;
color: blue;
}
.where {
#extend %style;
color: blue;
}
the footer gets lost as you are not using the repsonsive Bootstraps design in your footer element. Also to utilise the responsive element, and grid component it is best to define an elements col per the device being used. For example:
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-9">
<!-- code in here -->
</div>
</div>
The lg large devices, md medium devices and sm small devices. This is will allow all of your elements to adapt to a device. https://getbootstrap.com/docs/4.5/layout/grid/
Here is more information on the grid system bootstrap uses and how to write responsive code.
Also, to make it easier for custom styling your website you can just use one stylesheet and only link one stylesheet. Your SASS stylesheet will get changed into a .css file, you can write vanilla css in your SASS file and it will remain css.
I made this website (it's not finished yet of course) but I've got a problem with making what's already done responsive :(
Background image is sizing with h1 and h3 but it does not look good and also it goes under menu.
Does anyone got any advice on how to make it responsive? And make it look better on smaller screens?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-size: 16px;
}
.header-main {
background-image: url("https://i.stack.imgur.com/EJvoD.jpg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 90vh;
width: auto;
font-family: 'Monoton', cursive;
}
.header-main h1 {
font-size: 6vw;
color: rgb(253, 59, 101);
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
margin-left: 1rem;
}
.header-main__subtitle {
color: rgb(253, 59, 101);
margin-right: 1rem;
}
.header-main__subtitle h3 {
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
}
.header-main__subtitle h3 div {
padding: 0.2rem;
}
.header-menu__items {
display: flex;
list-style: none;
flex-flow: row wrap;
justify-content: space-between;
height: 10vh;
}
.header-menu__item {
padding: 2rem;
}
.header-menu__item a {
text-decoration: none;
color: rgb(253, 59, 101);
font-weight: bold;
font-family: "Courier New", Courier, monospace;
}
.header-menu__item a:hover {
border-bottom: 2px solid rgb(253, 59, 101);
}
#media screen and (orientation:portrait) {
.header-main {
height: auto;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://fonts.googleapis.com/css?family=Monoton" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="header-menu">
<nav>
<ul class="header-menu__items">
<li class="header-menu__item">HOME</li>
<li class="header-menu__item">ABOUT</li>
<li class="header-menu__item">SERVICES</li>
<li class="header-menu__item">INSTA</li>
<li class="header-menu__item">CONTACT</li>
<li class="header-menu__item">BOOK ONLINE</li>
</ul>
</nav>
</div>
<div class="header-main">
<div><h1><div>GODDESS</div><div>BRAIDS</div><div>SALON</div></h1></div>
<div class="header-main__subtitle"><h3><div>...WHERE</div><div>HAIR</div><div>DREAMS</div><div>COME</div><div>TRUE</div></h3></div>
</div>
<nav>
<ul>
<li>fb</li>
<li>inst</li>
<li>twitter</li>
</ul>
</nav>
</header>
<main>
<div>
<h1>about</h1>
<h2>GODDESS BRAIDS</h2>
<p>I'm a paragraph. Click here to add your own text and edit me. Itâs easy. Just click âEdit Textâ or double click me to add your own content and make changes to the font. Iâm a great place for you to tell a story and let your users know a little more about you.</p>
</div>
<div></div>
<div></div>
</main>
<footer>
</footer>
</body>
</html>
background image:
The most common ways to make a website responsive are the following:
Bootstrap, which is a framework used to create general layouts for different screens-sizes.
Media queries, which is a part of CSS3 and is used to apply styling on very specific screen-sizes.
Hamburger-buttons, which the navigation hides behind, to save you a lot of space.
CSS Grid, which is a grid-based layout system, that, in combination with Media Queries, can achieve the same results as Bootstrap can, and more! (though Bootstrap is easier to use)
I have an arrow, which is a bookmark link on top of video. How can it be positioned to the bottom of the video, not the top? Arrows div has position:absolute, while main container has relative. Using padding/margin causes overflow. How can i fix it?
/*NAVIGATION-----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#navbarul{
width: 20%;
margin: auto;
display: block;
}
#navbar{
display: block;
font-family: "Abel", sans sans-serif;
text-transform: uppercase;
font-size: 2em;
cursor: pointer;
display: inline-block;
text-align: center;
}
#mynavigation{
color: #864cfe;
height:6% ;
}
#media only screen and (max-width : 768px) { #mynavigation{
height:15% ;
}
}
/*IFRAMES--------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
iframe.video_1{
width: 100%;
height: 100%;
margin-top: 3%;
padding: 0;
}
#ifranme_container{
width: 100%;
height: 100%;
position: relative;
}
#scroll-arrow{
position: absolute;
}
#scroll-img{
width: 70%;
height: 70%;
display: inline-block;
margin: 0 auto;
}
#arowwrap{
text-align: center;
pointer-events: absolute;
margin: 100px;
z-index: 25;
}
/*PARAGRAPHS-----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.the_idea p{
margin-left: 28%;
}
.the_creative p{
margin-right: 28%;
}
/*BODY, DIVS-----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#mybody{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
#rowfirst{
padding: 0;
margin: 0;
}
<!DOCTYPE html>
<html lang="EN-us">
<head>
<title> Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="CSS/pages.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).on('click', 'a', function(event){
event.preventDefault();
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 1000);
});
</script>
</head>
<body id="mybody">
<div id="rowfirst" class="container-fluid">
<div id="ifranme_container" class="embed-responsive embed-responsive-16by9">
<iframe class="video_1" src="https://player.vimeo.com/video/195665241"></iframe>
<div id="arowwrap"> <a id="scroll-arrow" href="#scroll"><img class="img-responsive center-block" id="scroll-img" src="img/arrow.png"></a></div>
</div>
<div id="scroll" class="col-lg-6 the_idea">
<p>We collaborated with 180 LA to create an installation piece using HPâs versatile Pavilion X2 laptops; in order to showcase the submissions and bring fan generated content to the forefront of the red carpet premiere event.
180 LA hosted an online microsite to gather fan submitted light side and dark side theme renditions. Select entries were chosen and the user generated content was displayed on the HP Pavilion X2 computers. The result was an immersive moment that connected celebrities to the fans by giving them a chance to view the videos and experience the custom soundtracks synched in unison.
</p>
</div>
<div class="col-lg-6 the_creative">
<p>As an extension of HPâs larger âKeep Reinventingâ campaign, HP partnered with Disney to create the âSound Wars" experience for the global premiere of Star Warsâ˘: The Force Awakens.
HP challenged Grammy nominated producer DJ Snake and Vine Star Rudy Mancuso to reinvent the music of Star Warsâ˘: The Force Awakens in a whole new way. The video acted as inspiration and invited fans to record themselves recreating the sounds of two iconic Star Wars themes in their own way, for a chance to have their video featured on screen and on the red carpet using #awakenyourforce.
</p>
</div>
<nav id="mynavigation" class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div id="headernav" class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Portfolio</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<div id="navbarul">
<ul class=" nav navbar-nav">
<li id=webli><a id="navbar">Web</a></li>
<li id="videoli"><a id="navbar">Video</a></li>
<li id="photoli"><a id="navbar">Photo</a></li>
</ul>
</div>
</div>
</div>
</nav>
</body>
</html>
For bottom positioning use position and bottom property.
#arowwrap{
width: 100%;
text-align: center;
margin: 100px auto;
z-index: 25;
position: absolute;
bottom: 0;
}
What you want, if I understand correctly, is something like this:
#arowwrap{
position: absolute; /* You had pointer-events */
bottom: 20px; /* put the container to the bottom */
left: 0; /* Left and Right at 0 will center it */
right: 0;
margin: 0 auto; /* May or may not need this */
text-align: center; /* center it if you're using images or text */
height: 40px; /* Just to see it */
width: 40px; /* Just to see it */
}
Here is a codepen I made with your code, trying to understand the issue.
I've tried margin 0 auto in the css but it didn't seem to work, i'm not quite sure what i'm doing wrong, could anyone help me? I would like to move the text to touch the left side of the container because as of now it is in the middle of the container. The text I'm talking about is the text in the p tags, which are the email, Facebook, instagram, and twitter. Thanks for taking the time to help. Have a good day!
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contact</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="css/yourCustom.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav role="navigation" class="navbar navbar-default navbar-static-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Paulo Pinzon-Iradian
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<p style="font-size:24px;"></p>ppinzon-iradian#hotmail.com</p>
</br>
<p><a>Facebook</a></p>
<p><a>Instagram</a></p>
<p><a>Twitter</a></p>
</div>
</div> <!-- /container -->
<div>
</div>
</body>
</html>
Css:
.navbar-default{
background: #fff;
margin-top:3.5%;
border:0px;
}
.navbar-brand
{
font-family: helvetica;
font-size: 24px;
}
ul, li, a
{
font-family: helvetica;
font-size: 24px;
color: #000000;
letter-spacing: -0.5px;
font-weight: 100;
}
.navbar-toggle
{
border:0px;
}
.col-xs-6
{
margin-top:1.5%;
line-height: 27px;
}
.row
{
width: 92%;
margin-left: auto;
margin-right: auto;
}
.jumbotron
{
background: #fff;
border:0px;
font-family: helvetica;
font-size: 24px;
text-decoration: none;
}
Currently there's a large padding surrounding the p elements. To fix that without overriding it using bootstrap class, add new class no-padding or something then override it on the css targeting that new class.
e.g.
HTML
<div class="container">
<div class="jumbotron no-padding">
<p style="font-size:24px;"></p>ppinzon-iradian#hotmail.com</p>
</br>
<p><a>Facebook</a></p>
<p><a>Instagram</a></p>
<p><a>Twitter</a></p>
</div>
</div> <!-- /container -->
CSS
.container .jumbotron.no-padding
{
background: #fff;
border:0px;
font-family: helvetica;
font-size: 24px;
text-decoration: none;
padding-left: 0;
padding-right: 0;
}
Fiddle
The elements you want to remove the margin are inside a .jumbotron element, this is styled by bootstrap and will add those margins/paddings. Check the docs for jumbotron
<div class="jumbotron">
You can either override the styles by adding !important in your styles (bust me after the bootstrap styles), or use another bootstrap component other thant jumbotron.
If you mean text in .jumbotron class, you can simply remove padding-left in
#media screen and (min-width: 768px) {
.container .jumbotron, .container-fluid .jumbotron {
padding-right: 60px;
padding-left: 0;
}
}
or simply remove it
#media screen and (min-width: 768px) {
.container .jumbotron, .container-fluid .jumbotron {
padding-right: 60px;
{
}
Remove the left padding from the jumbotron container, either through your css page or inline styling.
Example:
<div class="jumbotron" style="padding-left:0px;">
// your content here
</div>
or (using css):
.jumbotron {
padding-left: 0px !important;
}
Fiddle:
https://jsfiddle.net/mwatz122/614wjpjh/
I created a website last night that works in Chrome, Firefox, Safari and Opera, but it isn't working in Internet Explorer
I tried creating conditional styling and html5.shiv in the head tags. My code looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Flat Design</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>
<link href="css/hover.css" rel="stylesheet" media="all">
<!--[if lt IE 9]>
<script src="dist/html5shiv.js" type="text/javascript"></script>
<script src="PIE.js" type="text/javascript"></script>
<style type="text/css">
.wrap {
width: 980px;
}
.logo {
float: left;
}
.main-nav {
float: right;
}
.main {
width: 40.425531914894%;
height: 900px;
margin: 0;
}
.secondary {
width: 36.170212765957%;
height: 900px;
margin-left: 15px;
}
.extra {
display: block;
width: 23.404255319149%;
height: 900px;
}
</style>
<![endif]-->
</head>
<body>
<div class="wrap">
<header class="main-header">
<a class="logo" href="#"><h2>My Experience in Web Development</h2> </a>
<nav class="main-nav">
<a link href="#" class="hover">Home</a>
<a link href="#" class="hover">About</a>
<a link href="#" class="hover">Clients</a>
<a link href="#" class="hover">News</a>
<a link href="#" class="hover">Contact</a>
</nav>
</header>
<div class="content">
<div class="main col">
<h3>My candid experience in trying to find a job as a Web Developer</h3>
<p>It hasn't been a dull moment ever since I decided to switch careers to web development.</p>
<p>I've taken up the arduous task of putting together a portfolio of several pieces of my best work. At the same time, I brushed up on my skillset by taking online courses at Team Treehouse and several YouTube tutorials, as well as utilized sites such as Stack Overflow, SitePoint, Six Revisions, etc.</p>
</div>
<div class="secondary col">
<h3>Hitting the pavement for a job in web development.</h3>
<p>In December of 2012, I decided to put my resume online to see what the job market was like in web development.</p>
<p>A month later,I landed an assignment at Web 4 Purpose as a jr. front end web developer.I handled all of the CSS,HTML,Javascript coding from wireframes done in Adobe Photoshop or drawn.<br></p>
</div>
<div class="extra col">
<h3>There's several web technologies.</h3>
<p>Here's a short list of the several web technologies out there:</p>
<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>Javascript</li>
<li>JQuery</li>
<li>Bootstrap </li>
<li>Foundation</li>
<li>Angular.js </li>
</ol>
<br>
</div>
</div>
<footer class="main-footer">
<img src="img/twitter.png" alt="Twitter" class="social-icon">
<img src="img/facebook.png" alt="Facebook" class="social-icon">
<img src="img/linkedin.png" alt="LinkedIn" class="social-icon">
<img src="img/youtube.png" alt="YouTube" class="social-icon">
<img src="img/googleplus.png" alt="Google Plus" class="social-icon">
<p>Š 2014 michaellegemah.com</p>
</footer>
</div>
</body>
</html>
The CSS sheet is this:
* {
box-sizing: border-box;
}
body {
margin: 0;
padding-top: 25px;
background: #ECF0F1;
color: #FFF;
font: 1.3em/1.6 sans-serif;
}
.wrap {
margin: auto;
width: 90%;
}
.main-header {
background: #2C3E50;
text-align: center;
font-family: 'Lato', sans-serif;
font-weight: 900;
}
.logo,
.main-nav a {
display: inline-block;
color: #FFF;
text-decoration: none;
font-family: 'Lato', sans-serif;
font-weight: 900;
}
.main-nav a {
padding: 0 .75em;
border-right: 1px dotted;
color: #FFF;
font-size: .7em;
line-height: 1rem;
}
.main-nav a:hover {
text-decoration: underline;
}
.main-nav a:last-child {
border-right: none;
}
.content,
.main-header {
overflow: hidden;
}
.col {
height: auto;
}
.main {
background: #3498DB;
font-family: 'Lato', sans-serif;
}
h3 {
font-weight: 900;
}
li a, a {
text-decoration: none;
color: #FFF;
font-weight: 900;
}
.secondary {
background: #2ECC71;
font-family: 'Lato', sans-serif;
}
.extra {
display: none;
background: #C0392B;
font-family: 'Lato', sans-serif;
}
.main-footer {
background: #95A5A6;
font-family: 'Lato', sans-serif;
}
.social-icon {
width: 40px;
height: 40px;
margin: 0 5px;
border: none;
}
.main-header,
.main-footer,
.col {
margin-bottom: 15px;
padding: 2.15%;
border-radius: 5px;
}
/* ==========================================================================
Media Queries
========================================================================== */
/* Phones to Tablets */
#media only screen and (min-width: 481px) {
.col {
float: left;
}
.main {
width: 65.957446808511%;
height: 900px;
}
.secondary {
width: 31.914893617021%;
height: 900px;
}
.secondary,
.extra {
margin-left: 2.127659574468%;
}
}
/* Tablets to Desktop */
#media only screen and (min-width: 769px) {
.logo {
float: left;
}
.main-nav {
float: right;
}
.main {
width: 40.425531914894%;
height: 900px;
}
.secondary {
height: 900px;
}
.extra {
display: block;
width: 23.404255319149%;
height: 900px;
}
}
#media only screen and (min-width: 1024px) {
.wrap {
width: 980px;
}
}
Unfortunately, the result has been this: http://flatdesign.originexample.site90.com which looks fine in all browsers except IE
If anyone sees anything I might have overlooked, or if there's a better solution, please let me know thanks
Using the IE11 developer-tools emulator to mimick IE8, I'm seeing two main differences:
no rounded corners;
columns aren't floating side-by-side;
The border radius can't be fixed easily and doesn't really affect performance, so I hope you're okay with ignoring that.
The column floats are what's making it look really ugly, and thankfully that's easy to fix.
You're creating your columns with the following rule:
#media only screen and (min-width: 481px){
.col {
float: left;
}
}
The problem is the "only" keyword. That keyword is designed to prevent browsers that don't recognize media queries from applying that style. That includes IE8. It reads it as a media query for a media type named "only"; it doesn't recognize that type, so it doesn't apply the style. If you remove the keyword:
#media screen and (min-width: 481px){
.col {
float: left;
}
}
Then IE8 reads that as #media screen blah,blah,blah. It ignores the stuff it doesn't understand and applies the rule to all screens regardless of their width.
For IE8, that's probably okay, since nobody's using IE8 on a handheld device. And if their screen is too narrow, that's okay since it just means the floated elements will end up one after another, the way they are without the floats.
It's possible that the change will also affect some older handheld devices that don't recognize min-width type media queries, but again, floats are pretty flexible.
One more thing: even when I added in a float property to your columns, the third column wasn't fitting in a row with the others. Two possible culprits: either IE8 is automatically adding in padding or margins somewhere you're not expecting, or they are rounding lengths up to the next pixel and that's throwing off your addition. A little bit of playing around with those settings should get them all side-by-side. If you make your last column float right instead of left, you can get away with making the margins slightly smaller without ruining the rectangular lines of the design.