I have a pretty weird situation here.
I have this HTML:
<!DOCTYPE html>
<html>
<head>
<title>Notes</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="columns is-multiline">
<div class="column is-one-third">
<div class="card">
<header class="card-header">
<p class="card-header-title">
test1
</p>
<a href="/notes/pin/1" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-thumbtack" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
<p>testtt</p>
</div>
</div>
<footer class="card-footer">
Edit/View
Delete
</footer>
</div>
</div>
<div class="column is-one-third">
<div class="card">
<header class="card-header">
<p class="card-header-title">
Note test
</p>
<a href="/notes/pin/4" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-thumbtack" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
<p>- test</p>
</div>
</div>
<footer class="card-footer">
Edit/View
Delete
</footer>
</div>
</div>
</div>
<div style="padding-top:50px;"></div>
<!--- NON-PINNED -->
<div class="columns is-multiline">
<div class="column is-one-third">
<div class="card">
<header class="card-header">
<p class="card-header-title">
Note test
</p>
<a href="/notes/pin/2" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-thumbtack" style="color:lightgrey;" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
<p>Testi</p>
</div>
</div>
<footer class="card-footer">
Edit/View
Delete
</footer>
</div>
</div>
<div class="column is-one-third">
<div class="card">
<header class="card-header">
<p class="card-header-title">
Dhchjc
</p>
<a href="/notes/pin/3" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-thumbtack" style="color:lightgrey;" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
<p>Djfjgn<br>- eat 🌮</p>
</div>
</div>
<footer class="card-footer">
Edit/View
Delete
</footer>
</div>
</div>
<div class="column is-one-third">
<div class="card">
<header class="card-header">
<p class="card-header-title">
Fhfj
</p>
<a href="/notes/pin/5" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-thumbtack" style="color:lightgrey;" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
<p>Brjdjc</p>
</div>
</div>
<footer class="card-footer">
Edit/View
Delete
</footer>
</div>
</div>
</div>
<a href="/notes/new/">
<div id="floating-button" data-toggle="tooltip" data-placement="left" data-original-title="Create">
<p class="plus">+</p>
</div>
</a>
</body>
</html>
And my CSS:
#floating-button {
width: 55px;
height: 55px;
border-radius: 50%;
background: #db4437;
position: fixed;
bottom: 30px;
right: 30px;
cursor: pointer;
box-shadow: 0px 2px 5px #666;
}
.plus {
color: white;
position: absolute;
top: 0;
display: block;
bottom: 0;
left: 0;
right: 0;
text-align: center;
padding: 0;
margin: 0;
line-height: 55px;
font-size: 38px;
font-family: 'Roboto';
font-weight: 300;
}
.column {
margin-top: 10px;
}
.card {
margin-left: 10px;
margin-right: 10px;
max-height: 500px;
}
When viewing on regular desktop mode, everything is fine.
When on Chrome + mobile viewport, there is a slight overflow on the x axis.
When viewing on Firefox + mobile viewport, it is fine.
When removing the script tag importing Font-Awesome, there are no longer any problems on Chrome. The font-awesome CSS CDN also causes this.
There are two columns because one is for pinned notes (displayed first) and the other for regular ones.
The problem
When on Chrome with mobile viewport, the page width is larger than the viewport, but not with Firefox. I fixed it by remove the script tag importing Font-Awesome, but I would need font awesome and it's icons.
I've fixed this by adding .columns { margin-right:0px;margin-left:0px;} to the CSS. See this bulma issue.
Related
How do I get the About Me and Education sections to the right side of the web
Here is pencode link: https://codepen.io/Weng-Hong-the-selector/pen/GRGjVLy
Here is my HTML and CSS
`
<!DOCTYPE html>
<body>
<div class="resume">
<div class="resume_left">
<div class="resume_profile">
<img src="me.png" width=500px height=250px alt="profile_pic">
</div>
<div class="resume_content">
<div class="resume_item resume_info">
<div class="title">
<p class="bold">TAN WENG HONG</p>
<p class="regular">STUDENT OF DIPLOMA IN IT</p>
</div>
<ul>
<li>
<div class="icon">
<i class="fas fa-mars-and-venus"></i>
</div>
<div class="data">
Male
</div>
</li>
<li>
<div class="icon">
<i class="fa-solid fa-flag"></i>
</div>
<div class="data">
Malaysian
</div>
</li>
<li>
<div class="icon">
<i class="fa-solid fa-signs-post"></i>
</div>
<div class="data">
13A, Elitis Suria, Valencia, 47000, Sungai Buloh, Selangor
</div>
</li>
<li>
<div class="icon">
<i class="fas fa-mobile-alt"></i>
</div>
<div class="data">
012-352-5089
</div>
</li>
<li>
<div class="icon">
<i class="fas fa-envelope"></i>
</div>
<div class="data">
wenghong.tan#sd.taylors.edu.my
</div>
</li>
</ul>
</div>
<div class="resume_item resume_social">
<div class="title">
<p class="bold">Social</p>
</div>
<ul>
<li>
<div class="icon">
<i class="fab fa-facebook-square"></i>
</div>
<div class="data">
<p>Facebook</p>
</div>
</li>
<li>
<div class="icon">
<i class="fab fa-instagram-square"></i>
</div>
<div class="data">
<p>Instagram</p>
</div>
</li>
<li>
<div class="icon">
<i class="fab fa-youtube"></i>
</div>
<div class="data">
<p>Youtube</p>
</div>
</li>
<li>
<div class="icon">
<i class="fab fa-linkedin"></i>
</div>
<div class="data">
<p>LinkedIn</p>
</div>
</li>
</ul>
</div>
<div class="resume_right">
<div class="resume_item resume_about">
<div class="title">
<p class="bold">About me</p>
</div>
<p>My name is Tan Weng Hong and I am currently 19 years old</p>
</div>
</div>
</div>
<div class="resume_item resume_education">
<div class="title">
<p class="bold">Education</p>
</div>
<ul>
<li>
<div class="date">2021 - present</div>
<div class="info">
<p class="semi-bold">Taylor's College</p>
<p>Diploma in Information Technology</p>
<p>Current CGPA: 3.01</p>
<p>Will Graduate August 2023</p>
</div>
</li>
<li>
<div class="date">2016 - 2020</div>
<div class="info">
<p class="semi-bold">SMK Sri KDU</p>
<p>- Sijil Pelajaran Malaysia (SPM)</p>
<p>   Results: 1A+ 1A 1C+ 1C 2D 3E 1G</p>
</div>
</li>
</ul>
</div>
<div class="resume_item resume_hobby">
</body>
</html>
`
`
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
font-family: 'Roboto Condensed', sans-serif;
}
body {
background: #D3D3D3;
font-size: 14px;
line-height: 22px;
color: #555555;
width: 200vh;
text-align: center;
}
img{
border: solid;
border_width: 5px;
}
.bold {
font-weight: 700;
font-size: 20px;
text-transform: uppercase;
}
.semi-bold {
font-weight: 500;
font-size: 16px;
}
.regular{
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
}
.resume {
width: 1200px;
height: auto;
display: flex;
margin: 50px auto;
}
.resume .resume_left {
width: 290px;
height: 1050px;
background: #0bb5f4;
padding: 3px;
}
.resume .resume_left .resume_profile {
width: 100%;
height: 350px;
}
.resume .resume_left .resume_profile img {
width: 100%;
height: 100%;
}
.resume .resume_left .resume_content {
padding: 0 25px;
}
.resume .title {
margin-bottom: 20px;
}
.resume .resume_left .bold {
color: #fff;
}
.resume .resume_left .regular {
color: #b1eaff;
}
.resume .resume_item {
padding: 25px 0;
border-bottom: 2px solid #b1eaff;
}
.resume .resume_left ul li {
display: flex;
margin-bottom: 20px;
align-items: center;
}
.resume .resume_left ul li:last-child {
margin-bottom: 0;
}
.resume .resume_left ul li .icon {
width: 35px;
height: 35px;
background: #fff;
color: #0bb5f4;
border-radius: 50%;
margin-right: 15px;
font-size: 16px;
position: relative;
}
.resume .icon i,
.resume ul li i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.resume .resume_left ul li .data {
color: #b1eaff;
}
.resume .resume_left .resume_social .semi-bold {
color: #fff;
margin-bottom: 3px;
}
`
i want my about me section and education section to be on the right side of info section, any idea how to get that to work? thank you in advance
Not sure if you already figured this out, but a quick look at your code I saw that you had a html organization problem so the resume_right was inside the resume_left
this is your fixed code, hope it helps.
If after this you have any positioning problems, I suggest you read the CSS flex documentation.
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
<div class="resume">
<div class="resume_left">
<div class="resume_profile">
<img src="me.png" width=500px height=250px alt="profile_pic">
</div>
<div class="resume_content">
<div class="resume_item resume_info">
<div class="title">
<p class="bold">TAN WENG HONG</p>
<p class="regular">STUDENT OF DIPLOMA IN IT</p>
</div>
<ul>
<li>
<div class="icon">
<i class="fas fa-mars-and-venus"></i>
</div>
<div class="data">
Male
</div>
</li>
<li>
<div class="icon">
<i class="fa-solid fa-flag"></i>
</div>
<div class="data">
Malaysian
</div>
</li>
<li>
<div class="icon">
<i class="fa-solid fa-signs-post"></i>
</div>
<div class="data">
13A, Elitis Suria, Valencia, 47000, Sungai Buloh, Selangor
</div>
</li>
<li>
<div class="icon">
<i class="fas fa-mobile-alt"></i>
</div>
<div class="data">
012-352-5089
</div>
</li>
<li>
<div class="icon">
<i class="fas fa-envelope"></i>
</div>
<div class="data">
wenghong.tan#sd.taylors.edu.my
</div>
</li>
</ul>
</div>
<div class="resume_item resume_social">
<div class="title">
<p class="bold">Social</p>
</div>
<ul>
<li>
<div class="icon">
<i class="fab fa-facebook-square"></i>
</div>
<div class="data">
<p>Facebook</p>
</div>
</li>
<li>
<div class="icon">
<i class="fab fa-instagram-square"></i>
</div>
<div class="data">
<p>Instagram</p>
</div>
</li>
<li>
<div class="icon">
<i class="fab fa-youtube"></i>
</div>
<div class="data">
<p>Youtube</p>
</div>
</li>
<li>
<div class="icon">
<i class="fab fa-linkedin"></i>
</div>
<div class="data">
<p>LinkedIn</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="resume_right">
<div class="resume_item resume_about">
<div class="title">
<p class="bold">About me</p>
</div>
<p>My name is Tan Weng Hong and I am currently 19 years old</p>
</div>
<div class="resume_item resume_education">
<div class="title">
<p class="bold">Education</p>
</div>
<ul>
<li>
<div class="date">2021 - present</div>
<div class="info">
<p class="semi-bold">Taylor's College</p>
<p>Diploma in Information Technology</p>
<p>Current CGPA: 3.01</p>
<p>Will Graduate August 2023</p>
</div>
</li>
<li>
<div class="date">2016 - 2020</div>
<div class="info">
<p class="semi-bold">SMK Sri KDU</p>
<p>- Sijil Pelajaran Malaysia (SPM)</p>
<p>   Results: 1A+ 1A 1C+ 1C 2D 3E 1G</p>
</div>
</li>
</ul>
</div>
</div>
</div>
You should use position to choose the place of your elements in the flow,
in your example, if you want to have your "About me" and "education" always displayed on the right of your screen you have to use
position : fixed;
right : 0;
If you want them to be scrolled like everything else, you can considere using
position : absolute;
right : 0;
In both case you'll have to be carefull of element stacking.
Here are informations about position :
https://developer.mozilla.org/fr/docs/Web/CSS/position
You can use either text-align: right, or display: flex together with justify-content: flex-end. In general, text-align works mostly on text elements, and justify-content will justify all elements and content.
I think using flex box it will help you:
display: flex;
justify-content: flex-end
or you can use positioning for this for example:
<div style = "position:absolute; left:80px; top:20px; background-color:yellow;">
This div has absolute positioning.
</div>
Trying to find the bug on my css style sheet. I'm not sure why my html is not covering 100% of the page. See below screenshots:
The gap on the bigger screen is smaller but still annoying. See css below:
/*
===============
Fonts
===============
*/
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#200;300;400;500;700&display=swap');
/*
===============
Variables
===============
*/
:root {
--clr-primary-1: rgb(41, 41, 41);
--clr-primary-3: hsl(185, 81%, 29%);
--clr-white: #fff;
--ff-primary: 'Roboto', sans-serif;
--transition: all 0.3s linear;
--spacing: 0.1rem;
--radius: 0.5rem;
--light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
--dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
/*
===============
Global Styles
===============
*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}
body {
font-family: var(--ff-primary);
background: var(--clr-white);
color: var(--clr-primary-1);
line-height: 1.5;
font-size: 0.875rem;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
color: var(--clr-primary-1);
}
img {
width: 60%;
display: block;
margin: auto;
}
/* global classes */
.section-center {
width: 100vw;
margin: 0 auto;
}
/*
===============
NavBar - header
===============
*/
nav {
position: fixed;
top: 0;
background: var(--clr-white);
width: 100%;
display: flex;
z-index: 2;
text-align: center;
padding: 10px 5px;
box-shadow: var(--dark-shadow);
}
.header-title {
font-weight: 500;
top: 0;
left: 0;
width: 100%;
}
===============
Main Banner
===============
*/
.main-banner {
display: flex;
min-height: 85vh;
background: url('../images//USoA-Homepage-Block-3.webp') center/cover
no-repeat;
align-items: center;
}
/*
===============
SHOP ALL SECTION
===============
*/
.collections {
font-size: 1.5rem;
margin-left: 1rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: var(--spacing);
padding: 50px 0;
}
===============
ABOUT US
===============
*/
.about-us {
color: var(--clr-white);
background: var(--clr-primary-1);
display: flex;
display: block;
}
===============
PRODUCT
===============
*/
.products-holder {
padding: 1rem 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
justify-items: center;
}
HTML:
<!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>Rainbow Sodas UK</title>
<!-- favicon -->
<link
rel="shortcut icon"
href="./images//favicon.ico"
type="image/x-icon"
/>
<!-- font-awesome -->
<link
rel="stylesheet"
href="./fontawesome-free-5.12.1-web/css/all.min.css"
/>
<!-- styles css -->
<link rel="stylesheet" href="./css/styles.css" />
<!-- Script -->
<script src="./js/app.js" defer></script>
</head>
<body>
<header id="home">
<nav>
<button type="button" class="nav-toggle" id="nav-toggle">
<i class="fas fa-bars"></i>
</button>
<h1 class="header-title">RAINBOW SODAS UK</h1>
<button type="button" class="nav-toggle" id="cart-drawer-toggle">
<i class="fas fa-shopping-cart"
><span class="cart-items-counter">0</span></i
>
</button>
</nav>
</header>
<main>
<div class="side-menu" id="side-menu">
<button type="button" id="drawer-close" class="drawer-menu-close">
<i class="far fa-window-close"></i>
</button>
<div class="drawer-title">SODAS UK</div>
<ul class="nav-links">
<li>
shop all
</li>
<li>
products
</li>
<li>
about us
</li>
</ul>
</div>
<div class="cart-drawer" id="cart-drawer">
<div class="cart-inner">
<button
type="button"
id="cart-drawer-close"
class="cart-drawer-close"
>
<i class="far fa-window-close"></i>
</button>
<div class="cart-drawer-title">CART</div>
<section class="cart-items-list">
<article class="cart-item">
<div class="side-cart-product-item">
<h3>product 1</h3>
<button class="trash-icon">
<i class="far fa-trash-alt"></i>
</button>
</div>
<div class="side-cart-product-price">
<p>$40</p>
<div class="cart-qty">
<button class="qty-btn">-</button>
<span>0</span>
<button class="qty-btn">+</button>
</div>
</div>
</article>
</section>
</div>
<div cart="cart-footer">
<div class="total-display-side-cart">
<h3>total</h3>
<span>$120</span>
</div>
<div class="checkout-drawer">
<button>checkout</button>
</div>
</div>
</div>
<div class="main-banner">
<div class="banner-text">
<h1>
Welcome to <br /><strong
>the rainbow <br />uk <br />sodas company
</strong>
</h1>
</div>
</div>
<div class="collections">
<a href="#products-filter" class="shop-all"
>shop all <span><i class="fas fa-arrow-right"></i></span
></a>
</div>
<section class="section-center" id="about">
<div class="about-us">
<h1>WE THE PEOPLE BEHIND CRAFTED <br />SODAS IN <br />UK</h1>
<p>
In order for a more perfect beverage, establish variety, insure
palatable tranquility, provide for the extraordinary taste, promote
the general refreshment and secure the blessings of flavor to
ourselves and our posterity do ordain and establish this soda
company for the people of UK.
</p>
</div>
</section>
<section class="section-center" id="products-filter">
<div class="products">
<h1>SHOP THE <br />FLAVOURS</h1>
</div>
<button class="toggle-filter" id="toggle-category-filters">
filter
<span id="filter-btn-span"><i class="far fa-minus-square"></i></span>
</button>
<div class="categories-holder" id="categories-holder">
<button class="filter-btn" type="button" value="Berry">berry</button>
<button class="filter-btn" type="button" value="Berry">
citrusy
</button>
<button class="filter-btn" type="button" value="Berry">
classic
</button>
<button class="filter-btn" type="button" value="Berry">fancy</button>
<button class="filter-btn" type="button" value="Berry">floral</button>
<button class="filter-btn" type="button" value="Berry">jazzy</button>
<button class="filter-btn" type="button" value="Berry">juicy</button>
<button class="filter-btn" type="button" value="Berry">sour</button>
</div>
</section>
<section class="products-holder" id="products-holder">
<article class="single-product">
<div class="product-image-container">
<img src="images/Cherry_Pop_Still_4K_Front-CherryPop.png" alt="" />
</div>
<div class="product-title">
<h2>CHERRY POP</h2>
</div>
<div class="cart-btn-holder">
<button class="add-to-cart-btn" id="add-to-cart">
add to cart
</button>
</div>
</article>
<article class="single-product">
<div class="product-image-container">
<img
class="tour-img"
src="images/Cherry_Pop_Still_4K_Front-CherryPop.png"
alt=""
/>
</div>
<div class="product-title">
<h2>CHERRY POP</h2>
</div>
<div class="cart-btn-holder">
<button class="add-to-cart-btn" id="add-to-cart">
add to cart
</button>
</div>
</article>
<article class="single-product">
<div class="product-image-container">
<img
class="tour-img"
src="images/Cherry_Pop_Still_4K_Front-CherryPop.png"
alt=""
/>
</div>
<div class="product-title">
<h2>CHERRY POP</h2>
</div>
<div class="cart-btn-holder">
<button class="add-to-cart-btn" id="add-to-cart">
add to cart
</button>
</div>
</article>
<article class="single-product">
<div class="product-image-container">
<img
class="tour-img"
src="images/Cherry_Pop_Still_4K_Front-CherryPop.png"
alt=""
/>
</div>
<div class="product-title">
<h2>CHERRY POP</h2>
</div>
<div class="cart-btn-holder">
<button class="add-to-cart-btn" id="add-to-cart">
add to cart
</button>
</div>
</article>
<article class="single-product">
<div class="product-image-container">
<img
class="tour-img"
src="images/Cherry_Pop_Still_4K_Front-CherryPop.png"
alt=""
/>
</div>
<div class="product-title">
<h2>CHERRY POP</h2>
</div>
<div class="cart-btn-holder">
<button class="add-to-cart-btn" id="add-to-cart">
add to cart
</button>
</div>
</article>
<article class="single-product">
<div class="product-image-container">
<img
class="tour-img"
src="images/Cherry_Pop_Still_4K_Front-CherryPop.png"
alt=""
/>
</div>
<div class="product-title">
<h2>CHERRY POP</h2>
</div>
<div class="cart-btn-holder">
<button class="add-to-cart-btn" id="add-to-cart">
add to cart
</button>
</div>
</article>
<article class="single-product">
<div class="product-image-container">
<img
class="tour-img"
src="images/Cherry_Pop_Still_4K_Front-CherryPop.png"
alt=""
/>
</div>
<div class="product-title">
<h2>CHERRY POP</h2>
</div>
<div class="cart-btn-holder">
<button class="add-to-cart-btn" id="add-to-cart">
add to cart
</button>
</div>
</article>
<article class="single-product">
<div class="product-image-container">
<img
class="tour-img"
src="images/Cherry_Pop_Still_4K_Front-CherryPop.png"
alt=""
/>
</div>
<div class="product-title">
<h2>CHERRY POP</h2>
</div>
<div class="cart-btn-holder">
<button class="add-to-cart-btn" id="add-to-cart">
add to cart
</button>
</div>
</article>
<article class="single-product">
<div class="product-image-container">
<img
class="tour-img"
src="images/Cherry_Pop_Still_4K_Front-CherryPop.png"
alt=""
/>
</div>
<div class="product-title">
<h2>CHERRY POP</h2>
</div>
<div class="cart-btn-holder">
<button class="add-to-cart-btn" id="add-to-cart">
add to cart
</button>
</div>
</article>
<article class="single-product">
<div class="product-image-container">
<img
class="tour-img"
src="images/Cherry_Pop_Still_4K_Front-CherryPop.png"
alt=""
/>
</div>
<div class="product-title">
<h2>CHERRY POP</h2>
</div>
<div class="cart-btn-holder">
<button class="add-to-cart-btn" id="add-to-cart">
add to cart
</button>
</div>
</article>
</section>
<!-- footer -->
<footer class="section footer">
<!-- footer links -->
<ul class="footer-links">
<!-- single link -->
<li>
home
</li>
<!-- end of single link -->
<!-- single link -->
<li>
about
</li>
<!-- end of single link -->
<!-- single link -->
<li>
products
</li>
<!-- end of single link -->
</ul>
<!-- end of footer links -->
<!-- footer icons -->
<ul class="footer-icons">
<!-- single icon -->
<li>
<a
href="https://www.twitter.com"
target="_blank"
class="footer-icon"
>
<i class="fab fa-facebook"></i>
</a>
</li>
<!-- end of single icon -->
<!-- single icon -->
<li>
<a
href="https://www.twitter.com"
target="_blank"
class="footer-icon"
>
<i class="fab fa-twitter"></i>
</a>
</li>
<!-- end of single icon -->
<!-- single icon -->
<li>
<a
href="https://www.twitter.com"
target="_blank"
class="footer-icon"
>
<i class="fab fa-instagram"></i>
</a>
</li>
<!-- end of single icon -->
</ul>
<!-- end of footer icons -->
<p class="copyright">
copyright © carlos suarez <span id="date"></span>. all rights
reserved
</p>
</footer>
</main>
</body>
</html>
I have checked the body class and the different classes that control the width but I can't find the problem. I have added the css classes where I think there could be a problem.
thanks!
add this css
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
My icons keep going to the left:
<section class="section-what-i-do">
<div class="container">
<h2>What I do</h2>
<p class="sub-header" id="learn-more-section">Studying, creating, learning</p>
<div class="row">
<div class="col-md-4">
<i class="ion-ios-monitor-outline icon-large"></i>
<h3>Computer Science</h3>
</div>
<div class="col-md-4">
<i class="ion-ios-cloudy-outline icon-large"></i>
<h3>Web development</h3>
</div>
<div class="col-md-4">
<i class="ion-ios-bolt-outline icon-large"></i>
<h3>Learning new tech</h3>
</div>
</div>
</div>
</section>
Css:
.icon-large{
font-size: 350%;
text-align: center;
margin: 0 auto 10px auto;
color: #e74c3c;
}
I do not want to use Bootstrap glyphicons, the ionicons fonts look much better to me.
The icons appear to the far left as if there is code that is set to float: left.
Try putting the text-align:center on the parent div...
You icons are display:inline by default so aren't affected by margin.
.icon-large {
font-size: 350%;
color: #e74c3c;
}
.col-md-4 {
text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
<section class="section-what-i-do">
<div class="container">
<h2>What I do</h2>
<p class="sub-header" id="learn-more-section">Studying, creating, learning</p>
<div class="row">
<div class="col-md-4">
<i class="ion-ios-monitor-outline icon-large"></i>
<h3>Computer Science</h3>
</div>
</div>
</div>
</section>
Let me proceed by saying that I have searched Google and Stack Overflow to find the answer to this. I have tried many solutions, but none are working.
The main issue right now is the fact that my CSS won't override the Bootstrap CSS in the jumbotron. It won't change the background color, background image or nav bar settings.
I have tried using !important. I have tried calling my stylesheet after calling the bootstrap one. In my current version, I have the #import code to call the Bootstrap CSS at the beginning of my own CSS file. None have worked. For a few items, I changed the bootstrap file, but only for color.
Please help me figure out why my file will not override bootstrap. You can see the site at http://www.dismantledesign.com/testsite2/
The site is incomplete. I just can't proceed with styling until I figure this out.
Sorry if any code ends up missing. SO doesn't always like my pastes from TextWrangler. Feel free to look at it via the source code in the link.
Code below:
#import url("bootstrap.min.css");
body{
font-family: 'Raleway', Helvetica, Arial;
font-size: 16px;
color: #666666;
font-weight: 400;
letter-spacing: 1px;
}
p{
line-height: 20pt;
font-weight: 400;
}
h1, h2, h3, h4, h5, h6{
color: #333333;
text-transform: uppercase;
font-family: 'Raleway', Helvetica, Arial;
font-weight: 700;
}
a{
color: #00acec;
text-decoration: none;
font-family: 'Raleway', Helvetica, Arial;
font-weight: 600;
}
a:hover, a:focus{
color: #5a5e61;
text-decoration: none;
}
.btn-default{
border-radius: 2px;
border: 1px solid #a7adb0;
font-size: 14px;
color: #a7adb0;
font-weight: 700;
text-transform: uppercase;
padding: 11px 20px;
}
.btn-default:hover{
background: #5a5e61;
color: #a7adb0;
}
/*end*/
/*logo*/
.navbar-brand{
width: 174px;
height: 50px;
padding: 0;
margin: 0;
text-indent: -9999px;
}
/*end*/
/*navigation*/
.navbar-default{
background: none;
border: none;
padding: 0 0 60px 0;
}
.navbar-default .navbar-nav>li>a{
font-size: 20px;
font-weight: 600;
text-transform: uppercase;
color: #a7adb0;
padding: 11px 0;
text-align: center;
}
.navbar-default .navbar-nav>li>a:hover[
color: #fff;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover{
background: none;
outline: 0;
color: #fff;
}
.navbar-toggle{
border: none;
margin-top: 0;
margin-right: 0;
width:32px;
height: 32px;
text-align: center;
}
.navbar-default .navbar-collapse{
border: none;
background: rgba(0,0,0,0.1) !important;
border-radius: 2px;
box-shadow: none;
}
.jumbotron{
background: #363737 url("img/tempjumbotron.jpg") no-repeat;
background-size: cover;
max-height: 800px;
padding: 60px 0;
margin: 0;
}
/*end*/
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!--Hey, this is the CC title!-->
<title>Contra Coda Media | Audio | Photo | Video</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!--This is where the CSS comes from. -->
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="jumbotron">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display-->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only"> Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="img/logo5.png"></a>
</div>
<!-- Collect Nav Content -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Services</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div><!--END NAVBAR COLLAPSE-->
</nav>
<div class="row text-center">
<h1>THIS IS CONTRA CODA</h1>
<h3>where the music never ends</h3>
LEARN MORE
</div>
</div>
</div>
<!--END JUMBOTRON-->
<div class="whatsnew">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="img-responsive" src="img/levelup.jpg" alt="">
</div>
<div class="item">
<img class="img-responsive" src="img/heartwhole.jpg" alt="">
</div>
</div>
</div>
</div>
<!--END WHATS NEW-->
<div class="services">
<div class="container">
<div class="row">
<div class="services-audio text-center">
<div class="col-md-4">
<span style="font-size: 30px" class="glyphicon glyphicon-headphones"> </span>
<h4>AUDIO</h4>
<p>We believe in good, thoroughly crafted recording and mixing with great care in order to achieve a high-quality result.</p>
learn more
</div>
</div>
<div class="services-photo text-center">
<div class="col-md-4">
<span style="font-size: 30px" class="glyphicon glyphicon-camera"> </span>
<h4>PHOTO</h4>
<p>We believe in good, thoroughly crafted recording with great care in order to achieve a high-quality result.</p>
learn more
</div>
</div>
<div class="services-video text-center">
<div class="col-md-4">
<span style="font-size: 30px" class="glyphicon glyphicon-facetime-video"> </span>
<h4>VIDEO</h4>
<p>We believe in good, thoroughly crafted recording with great care in order to achieve a high-quality result.</p>
learn more
</div>
</div>
</div>
</div>
</div>
<!--END SERVICES-->
<div class="clients">
<div class="heading">
<div class="container">
<div class="row">
<div class="col-md-6 text-center">
<h1>Clients</h1>
</div>
<div class="col-md-6 text-center">
see more
</div>
</div>
</div>
</div>
<!--END HEADING-->
<div class="gallery">
<!--GALLERY START-->
<div class="galleryinner">
<img src="img/clients/ivey.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>IVEY</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
<div class="galleryinner">
<img src="img/clients/rufus.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>RUFUS DAWKINS</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
<div class="galleryinner">
<img src="img/clients/seddymac.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>SEDDY MAC</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
<div class="galleryinner">
<img src="img/clients/lomax.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>MELISSA LOMAX</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
<div class="galleryinner">
<img src="img/clients/jeremy.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>JEREMY WILLIAMS</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
<div class="galleryinner">
<img src="img/clients/echoing.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>WHEN ALL KEPT ECHOING</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
<div class="galleryinner">
<img src="img/clients/delisle.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>RAISTLIN DELISLE</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
</div>
<!--END GALLERY-->
</div>
<!---END CLIENTS-->
<div class="firstcontact">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="email text-center">
<span style="font-size: 30px" class="glyphicon glyphicon-envelope"> </span>
<h5>EMAIL</h5>
<p>layne#contracoda.com</p>
</div>
</div>
<div class="col-md-8">
<div class="social text-center">
<span class="icon-sprite sprite-ig"> </span>
<span class="icon-sprite sprite-fb"> </span>
<span class="icon-sprite sprite-twitter"> </span>
<span class="icon-sprite sprite-soundcloud"> </span>
</div>
</div>
</div>
</div>
</div>
<!---END FIRST CONTACT-->
<footer>
<div class="container">
<div class="row">
<div class="col-md-6 text-center">
<div class="copyright">
<small>© 2017 CONTRA CODA MEDIA</small>
</div>
</div>
<div class="col-md-6 text-center">
<div class="design">
<small>WEB DESIGN BY DISMANTLE DESIGN</small>
</div>
</div>
</div>
</div>
</footer>
<!---END CLIENTS-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.js"></script>
On line 82 you are using a square bracket [ instead of an squiggle {, swap this and it will work:
.navbar-default .navbar-nav>li>a:hover {
This basically makes everything after the error not work, thus why your background wont change :) Also your background image will not change unless it looks the line looks like this (line 110):
background: #363737 url(../img/tempjumbotron.jpg) no-repeat;
Koda
I have to display a list of products and on hover show some additional information. But on hover, it is flickering a lot. I am not able to understand how to remove that. Any help will be appreciated to remove flickering a lot on hover.
.fixed-width-200 {
width: 200px;
}
.img-responsiveExtended {
display: block;
height: 550px;
max-width: 100%;
overflow: hidden;
text-align: center;
vertical-align: central;
padding-top: 20px;
margin: 0 auto;
}
.parentContent {
position: relative;
/*border:outset;
border-width:thin;
margin:0px;*/
}
.contentWithMargin {
padding: 20px;
height: 200px;
position: absolute;
bottom:150px;
z-index: 1;
background-color:antiquewhite;
opacity:0.8;
}
.imageContentStyle {
z-index: 0;
float:left;
}
.columnBorder {
border: outset;
}
.divWithCenterImgStyle {
text-align:center;
}
.dealPriceStyle {
font-size: 24px;
}
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 parentContent" id="parentDiv">
<div class="imageContentStyle">
<div>
<div class="row">
<div class="divWithCenterImgStyle">
<center>
<img class=
"img-responsiveExtended img-container" src=
"http://ecx.images-amazon.com/images/I/A15JTuUMDOL._UY679_.jpg">
</center>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div style="text-align:right">
<strike>
</strike>
<span class=
"dealPriceStyle">
<mark>
<label>$
</label>58.00
</mark>
</span>
</div>
</div>
</div>
</div>
<div>
<h5>Calvin Klein Women's Two-Color Fringe Scarf
<small>
<a href=
"/DreamsNDeals/Home/DealsByVendor?vendorId=1">Amazon
</a>
</small>
</h5>
</div>
</div>
<div class="contentWithMargin collapse" id="38">
<div>
<div class="row modal-body">
<h6>
<span class="label label-warning">
<span class=
"glyphicon glyphicon-time">
</span>
</span>
</h6>
<h5>
<small>
</small>
</h5>
<!-- this text is coming as a flickering effect -->
<p class="text-primary">100% Acrylic Imported
Machine Wash 16" wide Color-blocked scarf with
fringe trim Made in China
</p>
<p class="text-info">Free Shipping
</p>
<div class="col-xs-6">
<p>
<a class="btn btn-primary" href=
"http://www.amazon.com/gp/product/B00Z69JVR8/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B00Z69JVR8&linkCode=as2&tag=dreamsndeal02-20&linkId=CAQNU4JFUUNNWPUB"
target="_blank">Get Deal »
</a>
</p>
</div>
<div class="col-xs-6">
<p class="text-primary">
</p>
</div>
</div>
</div>
</div>
</div>
</div>.
</div>
</body>
</html>
You can see the main HTML code and the CSS code as above.