How do dynamically resize a image - CSS / HTML - javascript

I'm trying to dynamically resize a .png image to whatever text is put on the box. As you can see from the printscreen it doesn't resize dynamically to fit the text in the box. I have no idea how to make it work ... the link to that page is here. I've tried formatting the padding, margins and adding classes and divs to that, but it didn't work. A link to the website can be found here.
So the problem in the
<div id='page' class='container'>:
<div id="page-bg1">
<div id="page-bg2">
<div id="page-bg3">
<div id="page" class="container">
<div class="box-style2" id="content">
<h2 class="title">Services</h2>
<p>Our experience and business ethics have evolved over several decades of working in the cleaning industry. We understand the importance of supervision, training, communication, and customer satisfaction. The facility types we serve include commercial, healthcare, corporate, education, industrial, manufacturing, and auto dealerships
</p>
<h2>Building Maintenance Services:</h2>
<ul>
<li><b>Contract Custodial Cleaning:</b> Outsourcing of custodial cleaning is a way for corporate clients to reduce their direct costs while ensuring that quality control standards are met. We can work within your existing cleaning specifications or custom design a complete program for your nightly cleaning requirements, including all labor, cleaning equipment and complete supervision. Additional value-add features include consumable product inventory control, periodic project cleaning, and quality control site audits.
</li>
<li><b>Certified Cleanroom Attendant Services: </b>
Cleanroom cleaning is a highly-specialized function and critical part of our clients’ quality control standards. We can develop and implement a program that will conform to your protocols. Our Attendants are trained and certified in all areas of contamination control including waste removal, gowning procedures, cleaning techniques and equipment handling.
</li>
</ul>
</div>
<div id="sidebar">
<div id="box2" class="box-style2">
<h2 class="title">Specialized Cleaning Services</h2>
<ul class="style3">
<li>ESD and composition tile floor refinishing and maintenance</li>
<li>Carpet and area rug cleaning</li>
<li>Cubicle fabrics partition and upholstery cleaning</li>
<li>Kitchen and cafeteria cleaning</li>
<li>Window and glass cleaning</li>
<li>Wall and ceiling cleaning</li>
</ul>
</div>
<div id="box3" class="box-style2">
<h2 class="title">Additional Services</h2>
<ul>
<li>Post-construction cleanup</li>
<li>Temporary hourly-rate personnel</li>
<li>Matron/day porters</li>
<li>Pressure washing</li>
<li>Painting</li>
<li>Relamping</li>
<li>Mold and mildew treatments</li>
<li>Fabric and carpet soil protection</li>
<li>Carpet deodorizing</li>
<li>Floor mat purchase and rental programs</li>
<li>Flame retardant applications</li>
<li>Static control applications</li>
<li>Seasonal school dormitory cleaning</li>
</ul>
</div>
</div>
</div>
</div>
</div>
The CSS is here:
html, body {
height: 100%;
}
body {
margin: 0px;
padding: 0px;
background: url(palette/png/Background/bg.png) repeat left top;
font: 14px/26px "Arvo", Georgia, "Times New Roman", Times, serif;
//color: #94856A;
color: #0020C2;
}
a
h1, h2, h3 {
margin: 0px;
padding: 0px;
font-family: 'Arvo', serif;
}
p, ol, ul {
margin-top: 0px;
}
strong {
}
a {
color: #789329;
}
a:hover {
text-decoration: none;
}
a img {
border: none;
}
img.border {
}
img.alignleft {
float: left;
}
img.alignright {
float: right;
}
img.aligncenter {
margin: 0px auto;
}
hr {
display: none;
}
.image-wrapper {
position : relative;
}
.scale-image {
display : block;
width : auto;
max-width : 75% ;
}
/** WRAPPER */
#wrapper {
background: url(palette/png/Background/bg.png) repeat left top;
}
#main-bg {
background: url(palette/png/Background/bg_combined.png) repeat center top;
}
.container {
width: 1000px;
margin: 0px auto;
}
.clearfix {
clear: both;
}
/** HEADER */
#header {
}
/** LOGO */
#logo {
height: 183px;
background: url(images/fmn_200.jpg) no-repeat center top;
text-align: center;
text-transform: uppercase;
}
#logo h1, #logo p {
margin: 0px;
}
#logo h1 {
padding-top: 107px;
letter-spacing: 2px;
line-height: 25px;
font-size: 25px;
color: #FFFFFF;
}
#logo h1 a {
text-decoration: none;
color: #FFFFFF;
}
#logo p {
padding-top: 15px;
letter-spacing: 1px;
line-height: 14px;
font-size: 14px;
color: #776D5C;
background: url(image/fmn_200.jpg);
}
/** MENU */
#menu {
height: 100px;
background: url(images/crop.png) repeat center top;
}
#menu ul {
height: 69px;
margin: 0px;
padding: 31px 0px 0px 0px;
list-style: none;
line-height: normal;
text-align: center;
}
#menu li {
display: inline;
}
#menu a {
display: inline-block;
margin: 0 30px;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
line-height: 68px;
font-size: 14px;
color: #FFFFFF;
}
#menu a:hover {
text-decoration: underline;
}
/** PAGE */
#page-bg1 {
overflow: hidden;
background: url(palette/png/CBG/cbg_shadow.png) repeat-x left bottom;
}
#page-bg2 {
background: url(palette/png/CBG/cbg_shadow.png) repeat-y center top;
}
#page-bg3 {
background: url(palette/png/CBG/cbg_combined.png) repeat center bottom;
}
#page {
overflow: hidden;
padding: 50px 0px 50px 0px;
}
.homepage #page {
height: auto !important;
height: 380px;
min-height: 380px;
}
/** SLIDERTRON */
#slidertron {
position: relative;
width: 900px;
height: 300px;
margin: 0px auto;
}
#slidertron .viewer {
width: 900px;
height: 290px;
overflow: hidden;
}
#slidertron .reel {
}
#slidertron .slide {
float: left;
width: 640px;
height: 260px;
background: #FFFFFF;
}
#slidertron .slide img {
padding: 9px;
border: 1px solid #E4E2DE;
}
#slidertron .indicator {
position: absolute;
bottom: 0px;
width: 100%;
height: 16px;
cursor: default;
user-select: none !important;
-khtml-user-select: none !important;
-moz-user-select: none !important;
-o-user-select: none !important;
-webkit-user-select: none !important;
}
#slidertron .indicator ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
}
#slidertron .indicator li {
display: inline;
}
#slidertron .indicator li.active {
}
#slidertron .indicator a {
display: inline-block;
width: 16px;
height: 16px;
margin: 0px 3px;
background: url(images/slidertron_01.png) no-repeat -16px -258px;
text-indent: -9999em;
}
#slidertron .indicator li.active a {
background-position: 0px -258px;
}
#slidertron .navigation a {
position: absolute;
top: 1px;
display: block;
width: 125px;
height: 258px;
background: url(images/slidertron_01.png) no-repeat;
text-indent: -9999em;
}
#slidertron .navigation a.previous {
left: -1px;
background-position: 0px 0px;
}
#slidertron .navigation a.next {
background-position: 100% 0px;
right: -1px;
}
/** CONTENT */
#content {
float: left;
width: 600px;
padding-left: 50px;
}
.two-column2 #content {
float: right;
padding-right: 50px;
padding-left: 0px;
}
#wide-content {
overflow: hidden;
padding: 0px 50px;
}
/** SIDEBAR */
#sidebar {
float: right;
width: 260px;
padding-right: 50px;
}
.two-column2 #sidebar {
float: left;
padding-left: 50px;
padding-right: 0px;
}
#sidebar .title {
font-size: 18px;
}
/** FOOTER BLOCK */
#footer-block-wrapper {
overflow: hidden;
padding-bottom: 40px;
}
#footer-block-bg {
overflow: hidden;
padding-bottom: 30px;
background: url(palette/png/Background/bg_bar.png) repeat-y center top;
}
#footer-block-bgtop {
background: url(palette/png/Background/bg_bar.png) no-repeat center top;
}
#footer-block {
overflow: hidden;
width: 860px;
height: auto !important;
padding: 70px 70px 0px 70px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #6C5F48;
}
#footer-block h2 {
margin: 0px;
padding: 0px 0px 20px 0px;
text-transform: uppercase;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
}
#footer-block #column1 {
float: left;
width: 240px;
margin-right: 70px;
}
#footer-block #column2 {
float: left;
width: 240px;
}
#footer-block #column3 {
float: right;
width: 240px;
}
/** FOOTER */
#footer {
padding: 50px 0px 70px 0px;
}
#footer p {
margin: 0px;
padding: 0px 0px 0px 0px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
color: #2F2518;
}
/** BOX 1 */
#box1 .title1, #box1 .title2 {
text-align: center;
}
/** BOX 2 */
#box2 {
margin-bottom: 30px;
}
/** BOX STYLE 1 */
.box-style1 {
}
.box-style1 .title1 {
padding: 0px 0px 5px 0px;
text-shadow: 1px 1px 1px #FFFFFF;
text-transform: uppercase;
font-weight: bold;
font-size: 26px;
color: #3C3223;
}
.box-style1 .title2 {
padding: 0px 0px 15px 0px;
text-shadow: 1px 1px 1px #FFFFFF;
text-transform: uppercase;
font-weight: normal;
font-size: 15px;
color: #8A7C60;
}
/** BOX STYLE 2 */
.box-style2 {
}
.box-style2 .title {
padding: 0px 0px 5px 0px;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 26px;
font-weight: bold;
color: #3C3223;
}
.box-style2 .byline {
letter-spacing: 1px;
text-transform: uppercase;
font-size: 15px;
font-weight: normal;
color: #8B806F;
}
/** LINK STYLE 1 */
.link-style1 {
display: inline-block;
height: 48px;
margin: 9px 0px 0px 0px;
background: url(images/bio_2.png) repeat-x left top;
}
.link-style1 a {
display: inline-block;
height: 48px;
background: url(images/bio_1.png) no-repeat left top;
line-height: 48px;
text-decoration: none;
text-transform: uppercase;
font-family: 'Arvo', serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
}
.link-style1 span {
display: inline-block;
padding: 0px 30px 0px 30px;
background: url(images/bio_3.png) no-repeat right top;
color: #FFFFF;
}
/** LINK STYLE 2 */
.link-style2 {
display: inline-block;
background: url(images/homepage09.gif) no-repeat left 3px;
margin-top: 20px;
padding-left: 30px;
text-decoration: none;
color: #9F9788;
}
/** LINK STYLE 3 */
.link-style3 {
background: url(images/homepage10.gif) no-repeat left 2px;
padding-left: 30px;
text-decoration: none;
color: #9F9788;
}
/** LIST STYLE 1 */
ul.style1 {
margin: 0px;
padding: 0px;
list-style: none;
}
ul.style1 li {
}
ul.style1 a {
color: #6C5F48;
}
/** LIST STYLE 2 */
ul.style2 {
margin: 0px 0px 10px 0px;
padding: 10px 0px;
list-style: none;
}
ul.style2 li {
float: left;
margin-right: 9px;
}
/** LIST STYLE 3 */
ul.style3 {
margin: 0px 0px 0px 0px;
padding: 0px 0px;
list-style: none;
}
The images which needs to be resized are palette/png/CBG/cbg_combined.png and palette/png/CBG/cbg_shadow.png, presented in the divs #page-bg3, #page-bg2 and #page-bg1. That's the image that I wanted to resize according to the div text presented in that box.. I'm also adding a screenshot so you guys can have an idea of the problem.
What can I do to make it work? I only need this central banner to be able to dynamically resize.
I'm also adding a screenshot of how I wanted the page to look like:

Basically, I have cropped your background and used it in a differnt way. You can get the images from the following link:
#page-bg1
#page-bg2
#page-bg-3
And here's my code:
#page-bg1 {
overflow: hidden;
background: url(https://dl.dropboxusercontent.com/u/23887590/cbg_combined2.png) center;
}
#page-bg2 {
background: url(https://dl.dropboxusercontent.com/u/23887590/cbg_combined.png) repeat-y center top;
}
#page-bg3 {
background: url(https://dl.dropboxusercontent.com/u/23887590/cbg_combined1.png) no-repeat center bottom;
}
Little Explanation:
#page-bg1 is the background behind and outside the box.
#page-bg-2 is a vertically repeating background inside the box where you put your content.
#page-bg-3 is a backgroud with dashed border at the bottom of your content box which doesn't repeat but is always fixed at the bottom.

Related

What changes should I make in the code in order to bring the texts within the line in mobile?

I'm from a non-tech background. I want to edit the trending page of my website so that the title of the songs appear within the same line as they appear in desktop and tablet. What changes should I make in order to achieve it? If someone could help me out I'd be really grateful.
Mobile
Desktop
.home_trending {
background: #fff;
padding: 25px;
}
.inner_home_trending:nth-child(2n+1) {
clear: left;
}
.home_inner_details {
width: 70%;
display: inline-block;
vertical-align:middle;
padding-left: 15px;
}
.home_p p {
margin: 0px !important;
}
.home_p .module-head {
border-top: 6px solid #7464f2;
border-radius: 3px;
}
.img_back .header img,
.movie_fream img,
.main-post img{
background-image: url(https://themusicalsafari.com/wp-content/uploads/2020/07/border.jpeg);
background-size: cover;
padding: 25px 25px;
background-position: center;
background-repeat: no-repeat;
}
.textwidget .main-post img,
.music_img .main-post img {
padding:17px;
}
.home_inner_details h2 {
font-size: 18px;
padding-bottom: 5px;
}
.home_inner_details a {
color: #333;
font-weight: 600;
}
.inner_number {
width: 10%;
display: inline-block;
vertical-align:middle;
text-align: left;
font-size: 18px;
color: #ccc;
font-weight: 700;
}
.inner_img {
width: 18%;
display: inline-block;
vertical-align:middle;
}
.music_img .header {
padding: 15px;
}
.img_back .main-post h2.entry-title {
margin-right: 15px;
}
.img_back .main-post .entry-title,
.img_back .main-post .post-meta.vcard{
display:block;
vertical-align: middle;
}
.inner_home_trending {
width: 50%;
float: left;
padding: 15px;
border-bottom: 1px solid #ccc;
}
.main_meta_val p {
color: #666;
}
.main_meta_val span {
font-weight: 600;
}
.ly_text_center{
text-align:center;
margin-top: 20px !important;
}
.post_col_movies a.viewmore {
text-align: center;
width: 100%;
display: block;
color: #28aaab;
}
.movie_block .post-content span {
width: 100%;
text-align: center;
display: block;
}
As I've mentioned above, I've zero knowledge about coding, still, I tried to change certain values, and see what would happen, but I couldn't get the result I wanted.
try to use flex-wrap: nowrap; on the element that has the photo and the title, here it is better described https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

How to make an element remain active when click on other element?

I'm working with this code:
$('.tab1-c').show();
$('.one').click(function(){
"use strict";
$('.tab1-c').show();
$('.tab2-c').hide();
$('.tab3-c').hide();
$('.tab4-c').hide();
});
$('.two').click(function(){
"use strict";
$('.tab1-c').hide();
$('.tab2-c').show();
$('.tab3-c').hide();
$('.tab4-c').hide();
});
$('.three').click(function(){
"use strict";
$('.tab1-c').hide();
$('.tab2-c').hide();
$('.tab3-c').show();
$('.tab4-c').hide();
});
$('.four').click(function(){
"use strict";
$('.tab1-c').hide();
$('.tab2-c').hide();
$('.tab3-c').hide();
$('.tab4-c').show();
});
.tab-nav-wrapper {
max-width: auto;
margin: 0 auto;
font-family: Open sans;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold;
}
.tab-content-wrapper {
background-color:#fff;
width: auto;
min-height: auto;
padding: 15px 35px 5px;
margin: 0 auto;
text-align:justify;
}
.tab1-c , .tab2-c, .tab3-c, .tab4-c{ display:none
}
.tab-nav-wrapper ul li {
text-align: center;
display: inline-block;
width: 25%;
margin: 0;
text-decoration: none;
color: #000;
}
.tab-nav-wrapper a {
display: inline-block;
width: 25%;
padding: .75rem ;
margin: 0;
text-decoration: none;
color: #000;
}
.fonts-content {
font-family: droid serif;
font-size: 15px;
line-height: 20px;
color: #000000 !important;
text-indent: 50px;
}
.two {
}
.two:hover ~ hr {
margin-left: 24.5%;
background: #d48344;
}
.three {
}
.three:hover ~ hr {
margin-left: 49%;
background: #706a87;
}
.four {
}
.four:hover ~ hr {
margin-left: 74%;
background: #47435f;
}
hr {
height: .25rem;
width: 25%;
margin: 0;
background: #d4bba7;
border: none;
transition: .3s ease-in-out;
}
h4 {
font-size: 30px;
font-family: Glegoo;
font-weight: bold;
margin-bottom: 15px;
margin-top: 20px;
line-height: 35px;
font-color: #000 !important;
text-align: center;
}
<div class="tab-nav-wrapper">
<ul>
<li class="one">Story #1</li><!--
--><li class="two">Story #2</li><!--
--><li class="three">Story #3</li><!--
--><li class="four">Story #4</li>
<hr>
</ul>
</div>
I would like for the element below each category to remain active when I hover over the other categories. I don't want it to jump back to its original position when clicking a different category. I want it to remain depending on which category I click.
Help please?
This is possible by using a little extra CSS and jQuery (I added #oneActive, #twoActive... ). Additionally, I cleaned up your jQuery a bit and rewrote most of it to get active to work.
$('.tab1-c').show();
mapping = {
"one":"tab1-c",
"two":"tab2-c",
"three":"tab3-c",
"four":"tab4-c"
};
$('.one, .two, .three, .four').click(function(){
$('.' + mapping[$(this).attr("class")])
.show()
.siblings()
.hide();
$(this)
.attr('id', $(this).attr("class") + "Active")
.siblings()
.attr("id","");
});
.tab-nav-wrapper {
max-width: auto;
margin: 0 auto;
font-family: Open sans;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold;
}
.tab-content-wrapper {
background-color:#fff;
width: auto;
min-height: auto;
padding: 15px 35px 5px;
margin: 0 auto;
text-align:justify;
}
.tab1-c , .tab2-c, .tab3-c, .tab4-c{ display:none
}
.tab-nav-wrapper ul li {
text-align: center;
display: inline-block;
width: 25%;
margin: 0;
text-decoration: none;
color: #000;
}
.tab-nav-wrapper a {
display: inline-block;
width: 25%;
padding: .75rem ;
margin: 0;
text-decoration: none;
color: #000;
}
.fonts-content {
font-family: droid serif;
font-size: 15px;
line-height: 20px;
color: #000000 !important;
text-indent: 50px;
}
.two {
}
.two:hover ~ hr, #twoActive ~ hr {
margin-left: 24.5%;
background: #d48344;
}
.three {
}
.three:hover ~ hr, #threeActive ~ hr {
margin-left: 49%;
background: #706a87;
}
.four {
}
.four:hover ~ hr, #fourActive ~ hr {
margin-left: 74%;
background: #47435f;
}
hr {
height: .25rem;
width: 25%;
margin: 0;
background: #d4bba7;
border: none;
transition: .3s ease-in-out;
}
h4 {
font-size: 30px;
font-family: Glegoo;
font-weight: bold;
margin-bottom: 15px;
margin-top: 20px;
line-height: 35px;
font-color: #000 !important;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-nav-wrapper">
<ul>
<li class="one">Story #1</li><!--
--><li class="two">Story #2</li><!--
--><li class="three">Story #3</li><!--
--><li class="four">Story #4</li>
<hr>
</ul>
</div>
<div>
<div class="tab1-c">test1</div>
<div class="tab2-c">test2</div>
<div class="tab3-c">test3</div>
<div class="tab4-c">test4</div>
</div>

Fixed CSS element moves page down when input focused in iOS

I am having a little UI issue and cannot work it out.
On an iOS device, when I click in the input QTY value on the fixed buy element at bottom, it shifts the whole page to the bottom.
CSS:
.product-bottom-sticky {
position: fixed;
bottom: 0;
background: #000000;
width: 100%;
padding: 0 14px 2px 0;
color: #ffffff;
display: none;
z-index: 1;
ul {
margin: 0;
li a span {
display: block;
font-size: 0.4em;
text-align: center;
margin-top: -6px;
margin-bottom: 5px;
}
}
.zopim-call-chat {
float: left;
font-size: 2em;
color: #ffffff;
}
.sticky-add-to-cart {
float: right;
margin: 6px 0 0 0;
padding: 3px 22px 9px 22px;
text-decoration: none;
}
.sticky-add-to-cart i {
font-size: 1.4em;
top: 2px;
left: -3px;
}
}
.sticky-qty div.form-control {
margin-bottom: 0px;
margin-top: 6px;
}
#media #{$mobile-breakpoint} {
.product-bottom-sticky {
display: block;
}
.sticky-chat {
float: left;
border-right: 1px solid #333333;
padding-right: 15px;
padding-top: 7px;
padding-left: 14px;
background: #555555;
}
.sticky-qty {
float: right;
width: 31%;
padding-top: 7px;
}
.sticky-qty label {
float: left;
color: #ffffff;
margin-top: 10px;
display: none;
}
.sticky-qty .quantity-input {
width: 31%;
float: right;
padding-top: 7px;
}
.sticky-add .button-add-to-cart {
background: #f14fa1;
border-color: #f14fa1;
}
.sticky-add,
.sticky-out {
float: right;
width: 52%;
padding-top: 7px;
}
}
Update
I found a partial solution here:
https://www.igorkromin.net/index.php/2016/05/20/mobile-safari-scrolling-problem-with-an-input-field-inside-a-fixed-div/
CSS:
html,body{
-webkit-overflow-scrolling : touch !important;
overflow: auto !important;
height: 100% !important;
}
This fixed the issue but created another issue: when I click the tabs it scrolls to the top.
Update 2
This is my JS which seems to be conflicting - maybe as it's using body, html. Is there a way to sort it since the input fix I added? It just seems to jump to the top of the tab on changing the tabs.
JS:
function scrollToTab(x) {
$("html, body").animate({
scrollTop: $(x).offset().top - 10
}, scrollSpeed);
}

Why won't these boxes appear in alignment?

I want all the boxes to be made with perfect alignemnt, but for some reason, from the second row onwards, they start to lean to the left.
$(document).ready(function() {
number = 0;
document.getElementById("create").onclick = function () {
var ok = true;
boxHTML = document.getElementsByClassName("box")[number].innerHTML;
if (ok === true) {
var obj = document.createElement('div');
obj.className = 'box';
obj.innerHTML = boxHTML;
$(this).before(obj);
}
number++;
};});
//Colours
$Background:#EAEAEA;
//Body
body{
}
//Menu
#menu {
margin-left: 5%;
margin-top: 5.25rem;
position:absolute;
ul{
list-style-type: none;
}
li{
a{
padding: 10px 15px;
text-decoration: none;
display: block;
color: black;
font-family: "roboto", sans-serif;
&:hover {
text-transform: uppercase;
}
}
}
}
//Dashboard
#dashboard{
display: inline-block;
border-radius:5px;
border: 0.5px solid black;
width: 73%;
height: 35rem;
margin-left: 17%;
margin-right: 20%;
margin-top: 6.8rem;
position: absolute;
-webkit-box-shadow:0 0 10px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 10px rgba(0,0,0,0.8);
box-shadow:0 0 10px rgba(0,0,0,0.8);
}
//Boxes
#import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
html, * {
box-sizing: border-box;
}
body {
background: #e4e9f0;
padding: 40px;
}
.box {
float: left;
position: relative;
display: inline-block;
width: 45%;
background: white;
padding: 30px;
margin-right: 2%;
margin-left: 4%;
margin-top: 3%;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
border-radius: 2px;
overflow: hidden;
+ .box {
margin: 0px;
margin-top: 3%;
}
&:after {
padding-top: 30%;
display: block;
content: '';
}
> div {
float: left;
width: 100%;
height: 150px;
color: #fff;
}
header {
background: #533687;
display: block;
margin: -30px -30px 30px -30px;
padding: 10px 10px;
h2 {
line-height: 1;
padding: 0;
margin: 0;
font-family: "roboto", sans-serif;
font-weight: 600;
font-size: 20px;
color: white;
-webkit-font-smoothing: antialiased;
}
}
}
#create {
user-select:none;
padding:20px;
border-radius:20px;
text-align:center;
border:15px solid rgba(0,0,0,0.1);
cursor:pointer;
color:rgba(0,0,0,0.1);
font:220px "Helvetica", sans-serif;
line-height:185px;
float:left;
padding:25px 25px 40px;
margin:0 20px 20px 0;
width:250px;
height:250px;
margin-top: 3%;
}
#create:hover { border-color:rgba(0,0,0,0.2); color:rgba(0,0,0,0.2); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dashboard">
<a href="#" class="box">
<header><h2>Responsive C3</h2></header>
<div id="chartA">
</div>
</a>
<div id="create">+</div>
</div>
JSFiddle
It didn't work for you because the newly added boxes have different margin properties. I've just statically set margin properties for the first box.
https://jsfiddle.net/oh0hjavL/2/

how to eliminate the horizontal scrollbar?

I am making a website and one of my biggest problem right now is making it fit on all screens and mobile friendly. One of my biggest problems with that is the horizontal scrollbar! I appreciate anything that can be offered.
here is my code:
<!DOCTYPE html>
<html>
<link rel="shortcut icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Metro-M.svg/2000px-Metro-M.svg.png">
<head>
<link rel="stylesheet" type="text/css" href="about.css">
<title>morgan</title>
<style>
html {
background: URL("https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png") white no-repeat center top;
background-size: 100%;
background-color: white;
margin: 0;
padding: 0;
overflow-x: none;
}
h2 {
Font-family: Arial;
top: 650px;
left: 500px;
position: absolute;
color: #525252;
font-size: 2vw;
letter-spacing: 1px;
}
h3 {
Font-family: Arial;
top: 900px;
left: 500px;
position: absolute;
color: #525252;
font-size: 2vw;
letter-spacing: 1px;
}
h1 {
position: absolute;
top: 21%;
left: 36%;
color: white;
font-family: Arial;
font-size: 4.6vw;
letter-spacing: 1px;
}
p {
position: absolute;
width: 600px;
top: 720px;
left: 310px;
height: 25px;
font-family: Gill Sans, sans-serif;
color:#696969;
font-size: 17px;
text-align: center;
line-height: 150%;
}
a {
color: white;
text-decoration:none;
}
ul li {
font-family: Arial;
text-align: center;
vertical-align: middle;
line-height: 40px;
top: 43%;
display: inline-block;
margin-top: 250px;
margin-left: 115px;
letter-spacing: 1px;
word-spacing: normal;
background-color: rgba(5, 4, 2, 0.1);
border: 2px solid white;
color: white;
text-align: center;
text-decoration: none;
font-size: 90%;
width: 150px;
height: 40px;
}
ul li:link,
ul li:visited {
font-family: Arial;
text-align: center;
vertical-align: middle;
line-height: 40px;
display: inline-block;
margin-top: 250px;
margin-left: 115px;
letter-spacing: 1px;
word-spacing: normal;
background-color: rgba(5, 4, 2, 0.1);
border: 2px solid white;
font-size: 90%;
width: 150px;
height: 40px;
text-decoration: none;
color: white;
}
li {
text-decoration: none;
color: white;
}
ul li:hover,
ul li:active {
background-color: white;
color: black;
text-decoration: none;
}
ul li a:hover, ul li a:active {
background-color: white;
color: black;
}
ul li a {
display: inline-block;
height: 100%;
width: 100%;
color: white;
text-decoration: none;
}
ul {
margin-right: 10%;
}
.wrapper {
padding-top: 0%;
}
#media screen and (max-width: 300px) {
.wrapper {
padding-top: 40%;
}
ul li{
margin-left: 2px;
margin-top: 5px;
margin-bottom: 0px;
width: 100px;
height:35px;
top: 480%;
}
ul{
margin-top: 165px;
margin-left: 20px;
}
h1{
position:absolute;
top: 120px;
left: 150px;
font-size: 19px;
}
h2 {
font-size: 20px;
width: 200px;
left: 100px;
top: 200px;
}
p {
left: 30px;
top: 390px;
}
hr {
margin-right: 85px;
margin-left: 85px;
margin-top: 375px;
}
}
hr {
margin-right: 150px;
margin-left: 150px;
margin-top: 570px;
}
</style>
</head>
<body>
<center><h1>WHO I AM</h1></center>
<div class="wrapper">
<ul>
<li><a href="www.youtube.com" class="life" ><strong>MY LIFE</strong></a></li>
<li><strong>PORTFOLIO</strong></li>
<li><strong>RESUME</strong></li>
<li><strong>ABOUT ME</strong></li>
</ul>
</div>
<h2>Some Fun Facts</h2>
<p>
I made this website from scratch when I was 14, I have a twin brother whose <br>
name is Pierson McNeal White, I have a older brother and sister who are also <br>
twins, I used to have 2 pet rats named Hermes and Cleo after the greek gods, <br>
and I watch the super bowl for the ads.
</p>
<hr>
<h3>Me In A Nutshell</h3>
</body>
Simply use
overflow-x: none;
for the horizontal scrollbar issue.
html {
background: URL("https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png") #363634 no-repeat center top;
background-size: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow-x: none;
}
Messed around with your code, didnt spend all day though. So there is still room for improvement, but fish around in here and pick what you like or build off of it.
body {
background-color: #e3e3e3;
margin: 0 auto;
padding: 0;
font-family: Arial;
}
.header {
background: url(https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png) no-repeat left fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
border: 1px solid #000;
text-align: center;
height: 400px;
}
.mobilelinks {display: none;}
.wrapper {
margin: 50px;
}
#footer {
text-align: center;
}
#footer a {
color: #666;
margin-left: 8px;
}
#footer a:hover {
color: #222;
text-decoration: underline;
}
h1 {
color: white;
font-family: Arial;
font-size: 72px;
letter-spacing: 1px;
}
h2 {
color: #525252;
font-size: 36px;
letter-spacing: 1px;
text-align: center;
}
p {
font-family: Gill Sans, sans-serif;
color:#696969;
font-size: 17px;
text-align: center;
line-height: 150%;
}
a {
color: white;
text-decoration:none;
}
ul li {
text-align: center;
line-height: 40px;
display: inline-block;
letter-spacing: 1px;
background-color: rgba(5, 4, 2, 0.1);
border: 2px solid white;
color: white;
text-align: center;
text-decoration: none;
font-size: 90%;
width: 150px;
height: 40px;
}
ul li:hover {
background-color: white;
}
ul li:hover > a {
color: #000;
}
#media screen and (max-width: 750px) {
.header {height: 300px;}
}
#media screen and (max-width: 500px) {
h1 {
font-size: 52px;
}
.links {display: none;}
.mobilelinks {display: inline-block;}
}
#media screen and (max-width: 400px) {
.header {height: 200px;}
.mobile-terms { display: none;}
h1 {
font-size: 36px;
}
h2 {
font-size: 22px;
}
}
<head>
<title>Morgan the Great</title>
<link rel="shortcut icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Metro-M.svg/2000px-Metro-M.svg.png">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="header">
<h1>Morgan White</h1>
<ul class="links">
<li><strong>MY LIFE</strong></li>
<li><strong>PORTFOLIO</strong></li>
<li><strong>RESUME</strong></li>
<li><strong>ABOUT ME</strong></li>
</ul>
<ul class="mobilelinks">
<li><strong>BUTTON</strong></li>
</ul>
</div>
<div id="mainwrapper">
<div class="wrapper">
<h2>Some Fun Facts</h2>
<p>
I made this website from scratch when I was 14, <br>
I have a twin brother whose name is Pierson McNeal White, <br>
I have a older brother and sister who are also twins, <br>
I used to have 2 pet rats named Hermes and Cleo after the greek gods, <br>
and I watch the super bowl for the ads.
</p>
</div>
<hr>
<div class="wrapper">
<h2>Me In A Nutshell</h2>
<p>
Other Crap Here.
</p>
</div>
</div>
<div id="footer">
Copyright © <script>document.write(new Date().getFullYear())</script> Morgan.
<div>
Link
Privacy Policy
Terms<span class="mobile-terms"> of Service</span>
</div>
</div>
Works on mobile devices.

Categories