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.
Related
Hello Peeps
Thanks a lot for taking your time in reading this. I am new in Wordpress. I want to update my footer.
I wrote an HTML code for my footer which I was going to use on Customisation>Layout>Footer.
But I am unable to link bootstrap 4 with that as the code window automatically removes the linked bootsrap line,
So I tried to add a footer widget but it is affecting my whole page. I want to use bootstrap 4 to make my footer responsive.
I don't know how to use media libraries. I managed to make my footer responsive with grid system (col-sm-12 , col-lg-4) but whenever I import my bootstrap 4 link.
Can you please help me on how should I make my footer responsive?
If you want to check it live
You can see footer of this page : https://techdevio.com/about/
Do not check footer of homepage as it is made by thrive architect and I was just trying to replicate it by writing code.
If you have any suggestions on how to make that code responsive without using bootstrap I would appreciate that too. :)
Thanks In Advance
.bg {
background-color: rgb(49, 65, 140);
color: white;
}
a {
color: white;
text-decoration: none;
}
.container {
text-align: center;
}
#social {
margin: 60px 0px auto;
overflow: hidden;
text-align: center;
}
#media screen and (max-width: 768px) {
#social {
margin: 26px auto;
}
}
#social ul {
margin: 0px auto;
list-style-type: none;
padding: 0px;
}
#social ul.social,
#social ul.contact {
display: inline-block;
}
#social li {
margin: 0 17px 0 0;
float: left;
color: black;
}
#media only screen and (max-width: 495px) {
#social li {
margin: 0 0 10px 0;
float: none;
clear: both;
}
}
#social li a {
color: black;
}
#social ul.social,
#social ul.contact {
display: inline-block;
}
.category {
font-weight: bold;
font-family: Literata !important;
font-size: 19px !important;
--g-regular-weight: 400;
--g-bold-weight: 700;
}
.cat-2 {
font-size: 18px;
font-family: Muli;
font-weight: 300 !important;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<footer class="bg">
<div class="container pt-3">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4">
Tech Dev I/O
<p>Tech Dev I/O Keeps You Updated With Latest Tech News & Gadgets. We Also provide Reviews Of Trending Gadgets </div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4">
<p class="category">Information</p>
<p>†Contact us</p>
<p>†About us</li>
<p>†Privacy policy</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4">
<p class="category">Contact Us</p>
<p> <i class="fa fa-phone" aria-hidden="true"></i>đ± +91 89998 17454</p>
<p><a class="cat-2" href="https://www.google.com/maps/place/Pune,+Maharashtra/#18.5245649,73.7228812,11z/data=!3m1!4b1!4m5!3m4!1s0x3bc2bf2e67461101:0x828d43bf9d9ee343!8m2!3d18.5204303!4d73.8567437" target="_blank"><i class="fa fa-map-marker" aria-hidden="true"></i>
đ 123, Society, Pune, MH 440013</a></li>
</p>
<p>
<i class="fa fa-envelope" aria-hidden="true"></i> đ§ techdevio20#gmail.com
</p>
</ul>
</div>
</div>
</div>
<div id="social">
<ul class="social">
<li><a target="_blank" href="https://www.facebook.com/techdevio.io">Facebook</a></li>
<li><a target="_blank" href="https://twitter.com/TechDev17">Twitter</a></li>
<li><a target="_blank" href="https://www.instagram.com/techdevio/">Instagram</a></li>
<li class="last"><a target="_blank" href="https://in.pinterest.com/techdevio/">Pintrest</a></li>
</ul>
</div>
<div id="social" style="margin-top: 0px;">
<p>©2020 Tech Dev I/O</p>
</div>
</footer>
</body>
</html>
You cannot apply stylesheets for specific HTML tags. You can scope them, for example - make all rules in the stylesheet related to the given tag/selector:
footer.bg {
/* Some footer styles */
}
footer.bg .category{
/* Some footer category styles */
}
but these styles are applied globally. Whenever the rule is matched, its styles are applied accordingly.
In your case, from what I understand, you need the Bootstrap grid tools like col, row, etc., but the import of the whole Bootstrap CSS overrides and breaks the styles you already have on that page.
There is an official Bootstrap grid CSS, which will provide only those responsive grid utilities. Keep in mind that it also comes with some display and flexbox utilities as well, which may potentially clash with some of your styles if you happen to use the same classes.
Here's the link: https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap-grid.min.css
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.
So I've noticed in my website that there if you scroll to the right (not as if there is any content to the right) there is a long vertical white strip. This is only if you scroll that you'll see it. This is only alongside certain div elements. Once I get to the rows, the content just stretches to the extra space to the right rather than have the white space as well. Since the problem isn't consistent, I've included all the HTML and CSS code to see if there may be two problems in two separate locations.
This is the HTML
<!DOCTYPE HTML>
<html>
<head>
<title>ACA Technology</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="MyWebsite.css">
</head>
<body>
<div id="infoHeader" class="header">
<div id="header_container">
<!-- header -->
<header class="header_shadow nav_type_12 sticky_header header_to_shrink clearfix" >
<div style="float: left; margin-left: 20px">
<h2> EAZYnetz </h2>
</div>
<div style="float: right; margin-right: 10px">
<button id="home" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-home"></span> Home</button>
<button id="ourApps" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-phone"></span> Our Services</button>
<button id="contactUs" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-user"></span> Contact Us</button>
</div>
</div><!-- end panel-footer -->
</div>
</div>
<div class="Home">
<div id="bigPicture" class="container" align="center">
<h1>BUILD YOUR EMPIRE.</h1>
<p>Every idea needs a website to express itself. Tell us what you need and how you'll like it. We'll make the layout, animation, and paint the final picture to your future method of advertisement.</p>
</div>
</div>
<div id="OurServices">
<div id="information" class="row">
<h3 align="center"> What's included in any option </h3>
<hr>
<div class="col-sm-4">
<h3>Your preferences</h3>
<p> Every idea needs a website to express itself. Tell us what you need and how you'll like it, then we'll make it perfect.</p>
</div>
<div class="col-sm-4">
<h3>Layout</h3>
<p> Tell us how you want everything formatted and where to place what according to your liking. </p>
</div>
<div class="col-sm-4">
<h3>Content</h3>
<p>What do you want to show your costumers? What do you want them to see? Put whatever you want to express on your webpage, no limits.</p>
</div>
</div>
<div id="servicesInfo" class="row">
<h3 align="center"> Choices to pick from</h3>
<hr>
<div class="col-sm-4">
<h3>Front End </h3>
<p>This consists of content text only.</p>
</div>
<div class="col-sm-4">
<h3> Front End + Design </h3>
<p>This consists of the content text and the design (colors, layout, menu, animation, etc). </p>
</div>
<div class="col-sm-4">
<h3>Whole Package <br> Front End + Design + Databases </h3>
<p> This is the whole package. It consists of the text of the website, design of the website, and the databases(forums, users, etc) in the website. <p>
</div>
<p> Overall price depends on level of complexity and number of pages </p>
</div>
</div>
<div id="ContactUs" class="jumbotron">
<div class="container">
<h3>Contact Us</h3>
<ul style="list-style-type:none">
<li><span class="glyphicon glyphicon-earphone"></span> 647-550-3998</li>
<li><span class="glyphicon glyphicon-envelope"></span> temporary#easynetz.net</li>
</ul>
<p> If you're interested or have any questions or concerns,<br> feel free to contact us. </p>
</div>
</div>
</body>
</html>
This is the CSS
a{
font-family: Avant Garde,Avantgarde,Century Gothic,CenturyGothic,AppleGothic,sans-serif;
}
p{
font-family: Avant Garde,Avantgarde,Century Gothic,CenturyGothic,AppleGothic,sans-serif;
font-size: 25px;
}
h1, h2, h3{
font-family: Avant Garde,Avantgarde,Century Gothic,CenturyGothic,AppleGothic,sans-serif;
font-size: 35px;
}
li{
font-family: Avant Garde,Avantgarde,Century Gothic,CenturyGothic,AppleGothic,sans-serif;
font-size: 25px;
color: #FFFFFF
}
#infoHeader{
height: 70px;
background-color: #1A1C27;
}
.header button{
position: relative;
top: 50%;
transform: translateY(50%);
}
.header a{
text-decoration: none;
}
.body{
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
.Home{
height: 573px;
background-image: url("clouds.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.Home h1,h2,h3{
color: white;
font-weight: 900;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
.Home p{
color: white;
font-weight: 900;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
.Home .container h1{
margin-top: 170px;
}
.top button{
background-color: black;
color: black;
font-size: 18px;
padding: 8px 30px;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
}
#theName{
color: white;
}
#information{
background-color: #68ABDD;
}
#information h3{
color: #ffffff;
text-align: center;
font-size: 20px;
}
#information p{
text-align: center;
font-size: 14px;
color: #ffffff;
}
#servicesInfo h3{
color: #ffffff;
text-align: center;
font-size: 20px;
}
#servicesInfo p{
text-align: center;
font-size: 14px;
color: #ffffff;
}
#servicesInfo{
background-color: #ff0000;
}
#ContactUs{
height: 635px;
padding:0!important;
margin:0 !important;
background-image: url("http://hdwallpaperspretty.com/wp-content/gallery/beautiful-buildings-wallpapers/Best-top-desktop-3d-buildings-wallpapers-hd-3d-buildings-wallpaper-13.jpg");
background-repeat: no-repeat;
}
#ContactUs{
color: white;
}
#contactHeader{
padding:0;
margin:0;
}
add following class to your CSS
#information, #servicesInfo {
margin: 0;
padding: 0;
}
you can fix that with adding the next css to the html tag on the html file or target the html on the css file:
overflow-x:hidden
The overflow means scrolling when the elements on the page are too big for the page. I didn't check your code to the end in order to see which element is too big for the page but this is a quick way to fix that.
The best option though is to check which element is too big and resize it with css in which way you want to.
One way is
max-width:100%;
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'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.