I am having a little issue here. When I reduced my screen, the color "Grey" runs into my white div below it for some reason. The div above it is my jumbotron, so I'm not sure why this is happening.
My website is below for you to check out and see what happens when you reduce it on a computer.
hustlebussellunlimited.com
Here is some of my CSS code below, please tell me if you need more.
.jumbotron{
background: linear-gradient(
rgba(0, 0, 0, 0.1),
rgba(0, 0, 0, 0.2)
), url(main-banner.jpg);
background-size: cover;
color: #ffffff;
padding: 0;
}
.jumbotron .intro{
background: rgba(0, 0, 0,0.1);
padding-top: 120px;
padding-bottom: 40px;
min-height: 400px;
}
.jumbotron .intro .row-top div.ccont{
}
.row-bottom{
margin-top: 20px;
margin-bottom: 20px;
}
.jumbotron div.ccont{
background: #fff;
min-height: 150px;
}
.jumbotron .row-top div.ccont{
-webkit-box-shadow: 0px 1px 2px rgba(100, 100, 100, 0.75);
-moz-box-shadow: 0px 1px 2px rgba(100, 100, 100, 0.75);
box-shadow: 0px 1px 2px rgba(100, 100, 100, 0.75);
}
.jumbotron .row-bottom div.ccont{
-webkit-box-shadow: -1px -1px 2px rgba(100, 100, 100, 0.75);
-moz-box-shadow: -1px -1px 2px rgba(100, 100, 100, 0.75);
box-shadow: -1px -1px 2px rgba(100, 100, 100, 0.75);
}
.jumbotron p{
padding: 20px 0;
}
.jumbotron .media{
margin: 50px 0;
}
.jumbotron .media-body h1{
margin-top: 100px;
}
section.slider{
color: #ffffff;
background: #696969;
margin: 40px 0;
padding: 40px 0;
}
section.slider h2{
margin-bottom: 20px;
}
section.slider .col-md-8{
padding-left: 30px;
}
Here is my HTML code
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron" id="home">
<div class="intro">
<div class="container">
<div class="row">
<h1 class="text-center"><span style="font-size:1.9em;">W</span>eb<span style="font-size:1.9em;">I</span>nsight</h1>
<p class="text-center">A Subsidiary of HustleBussell</p><br/>
</div>
<div class="row triangles">
<div class="up-triangle animated fadeInUp">
<div class="info">
Search Engine Optimization
</div>
</div>
<div class="down-triangle animated fadeInDown">
<div class="info">
Web Development<br/>
</div>
</div>
<div class="up-triangle animated fadeInUp">
<div class="info">
Marketing
</div>
</div>
<div class="down-triangle animated fadeInDown">
<div class="info">
Systems Security<br/>
</div>
</div>
<div class="down-triangle animated fadeInDown visible-sm">
<div class="info">
Mobile App Development<br/>
</div>
</div>
<div class="up-triangle animated fadeInUp">
<div class="info">
Consulting
</div>
</div>
<div class="down-triangle animated fadeInDown">
<div class="info">
Branding<br/>
</div>
</div>
<div class="up-triangle animated fadeInUp">
<div class="info">
Growth Hacking
</div>
</div>
</div>
</div>
</div>
</div>
<section id="services">
<div class="container">
<!-- Example row of columns -->
<div class="row features inner-page">
<div class="col-md-12 text-center">
<h2>Amplify your Reach, Achieve Massive Results</h2>
<p style="font-size:20px;">Many people believe they can build their brand and attract new clients by being active online only and engaging in marketing practices. This is only
partially true. In order to take your brand to the next level, you have to start with unrealistic thinking. Unrealistic meaning that we execute beyond what most people believe is possible. This thinking involves the client being at the starting point of it all. Ground Zero. This is what we call "Client Zero Thinking". WebInsight
takes you to the next level by engaging in "BackYard Marketing", generating sales leads and boosting revenue utilizing overlooked resources.</p>
</div>
</div>
</div>
</section>
<section class="slider" id="features">
<div class="container">
<div class="inner-page">
<h2 class="text-center">About Us</h2>
<p style="font-size:20px;" class="text-center">WebInsight is a creative marketing and technology company based in Chicago, Illinois. Our mission statement "Provide so much value
that the cost paid for our services is nothing compared to the benefit" is what we live by. We honor our clients and therefore we provide the best solutions
and services for your problems. Whether you're a company just starting or an already established business, we offer results oriented solutions to help you become a market leader.</p>
</div>
</div>
</div>
</section>
in the fiddle i couldn't simulate the problem but i entered and inspected your website. the problem is that the element that has that grey background , respectively .jumbotron .intro , contains the triangles.
when you resize the window, the triangles go on two rows and so the height of the .info becomes bigger and overlaps the next element ( white one ).
you've hidden the triangles with visibility:hidden here (max-width: 1152px) , visibility:hidden only hides the elements but they still occupy space. you should use display:none so the elements are hidden and they don't occupy space
code :
#media (max-width: 1152px)
.up-triangle, .down-triangle {
/* visibility: hidden; */
display: none!important;
}
added the !important because you also have in your css this : .visible-sm { display: block !important;} and it's overwriting the code. i suggest you don't use !important only if you really have to.
to read more info about the difference between visibility and display see here what-is-the-difference-between-visibilityhidden-and-displaynone
Related
I want to show an image in its full size in a section on my website with nothing over it.
So I created an empty section and set it as background then put a column plus a transparent element then setting padding and margin.
I'm attaching an image of the way it looks right now.
They are two sections (the one above is just for a reference. And not in the code)
Where the image is is a empty section with only background and it's the section I want to make as big as the image. Right now as you can see it's cut.
How can I make the size of the section as big as its background without having to put elements inside of it and using code?
I'm sure there must be a better way by using CSS.
<div class="content content--padding-large" style="background-color: rgb(255, 255, 255); padding: 0px;" id="_2odptjbtq">
<div class="background_changer background_changer--blur0 js-bg-next-gen" alt="" style="opacity: 1; background-image: url("//d1aettbyeyfilo.cloudfront.net/ladynetwork/15398563_1607856820728Background.webp");" data-bg="url("//d1aettbyeyfilo.cloudfront.net/ladynetwork/15398563_1607856820728Background.webp" data-was-processed="true"></div>
<div class="background_changer_overlay" style="background-image: none;"></div>
<div class="container">
<div class="row background_changer--blur0" data-component="grid" alt="" style="background-color: rgba(0, 0, 0, 0); border-radius: 0px; border-style: none; border-width: 0px; margin-top: 0px; margin-bottom: 0px; background-image: none; opacity: 1;"><div class="col-md-12 colView"><div class="js_kartra_component_holder">
<div data-component="divider">
<hr class="kartra_divider kartra_divider--border-extra-tiny kartra_divider--border-dim-black-opaque-25 pull-center kartra_divider--full" style="border-color: rgba(33, 33, 33, 0); border-top-style: solid; border-top-width: 1px; margin: 80px 0px 55px;">
</div>
<div data-component="divider">
<hr class="kartra_divider kartra_divider--border-small kartra_divider--border-royal-blue-two pull-center kartra_divider--full" style="border-color: rgba(49, 110, 212, 0); border-top-style: solid; border-top-width: 5px; margin: 0px;">
</div>
</div></div></div>
</div>
</div>
Try applying this style to it
style="min-width: 100%!important; max-width: 100%!important;"
I'm trying to resize the image size to the same size as the content of the text. However, when I try using solutions such as flex, the images are grayed out. Does anyone know any other way of achieving this? Or if I am doing something wrong. The Code is below, both html and Css, the website this is on is: on this page here . Any help would be much appreciated.
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 0px;
overflow: auto;
height: 300px; /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
background-color: black;
}
.row{
padding: 0.5% 1%;
}
.textcont{
background-color: black;
padding: 1.5%;
width: 100%;
overflow: auto;
height: 300px;
position: relative;
/*overflow: hidden;*/
}
.textcont > h1 {
margin: 0;
color: white;
text-shadow: 0 1px 0 white;
}
.imgcont{
background:
linear-gradient(
to right,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 5)
),
url('https://jackdaly.github.io/images/drawing (6).jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.buttonproj {
background-color: transparent;
color: white;
align-content: center;
padding: 1%;
border: 3px solid white;
}
.buttonproj:hover {
background-color: #555555;
color: white;
}
<h2 class="w3-center" style="padding-bottom: 2%">Portfolio</h2>
<div class="row">
<!-- ##### -->
<div class="column" style="background-color:#aaa;">
<div class="imgcont" style="background-image:linear-gradient(
to right,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 5)
), url('./images/fishtankcover.png')"></div>
</div>
<div class="column" style="">
<div class="textcont" style="" align="right">
<h1>Smart Tank </h1>
<p style="color: aliceblue">It can be a daunting experience for people buying, setting up and maintaining (or even thinking about) a fish tank and if they have the time needed for this hobby to keep their new friends alive. The AAS, short for Automatic Aquarium System (known as Smart Tank now), is a work in progress project that aims to be the step ladder for new users to climb with ease over the learning wall. The Smart Tank takes care of everything needed to take care of a fully planted aquarium.</p>
<div align="right" padding="1% 10%">
<button class="buttonproj" >Find Out More</button>
</div>
</div>
</div>
<!-- ##### -->
<div class="column" style="">
<div class="textcont" style="" align="left">
<h1>CNC Dust Shoe </h1>
<p style="color: aliceblue">CNC Dust shoes are incredibly important when milling any material, especially materials that can be toxic or bad for the user's health. With this project, I aimed to combine functionality with aesthetics to create a highly functional product that looks aesthetically pleasing. The project was designed in Fusion 360 and showcases how highly functional tools can also take on pleasing form. The shoe can be moved up and down, adjusted with ease and the hoover extension can be removed for different additions.</p>
<div align="left" padding="1% 10%">
<button class="buttonproj" >Find Out More</button>
</div>
</div>
</div>
<div class="column" style="background-color:#aaa;">
<div class="imgcont" style="background-image:linear-gradient(
to left,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 1)
), url('https://jackdaly.github.io/images/cncshoe (3).png') "></div>
</div>
<!-- ##### -->
</div>
Is this what you are looking for? It looks like the path to the image was relative. I've put in the absolute path.
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 0px;
overflow: auto;
height: 300px; /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
background-color: black;
}
.row{
padding: 0.5% 1%;
}
.textcont{
background-color: black;
padding: 1.5%;
width: 100%;
overflow: auto;
height: 300px;
position: relative;
/*overflow: hidden;*/
}
.textcont > h1 {
margin: 0;
color: white;
text-shadow: 0 1px 0 white;
}
.imgcont{
background:
linear-gradient(
to right,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 5)
),
url('https://jackdaly.github.io/images/drawing (6).jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.buttonproj {
background-color: transparent;
color: white;
align-content: center;
padding: 1%;
border: 3px solid white;
}
.buttonproj:hover {
background-color: #555555;
color: white;
}
<h2 class="w3-center" style="padding-bottom: 2%">Portfolio</h2>
<div class="row">
<!-- ##### -->
<div class="column" style="background-color:#aaa;">
<div class="imgcont" style="background-image:linear-gradient(
to right,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 5)
), url('https://jackdaly.github.io/images/fishtankcover.png')"></div>
</div>
<div class="column" style="">
<div class="textcont" style="" align="right">
<h1>Smart Tank </h1>
<p style="color: aliceblue">It can be a daunting experience for people buying, setting up and maintaining (or even thinking about) a fish tank and if they have the time needed for this hobby to keep their new friends alive. The AAS, short for Automatic Aquarium System (known as Smart Tank now), is a work in progress project that aims to be the step ladder for new users to climb with ease over the learning wall. The Smart Tank takes care of everything needed to take care of a fully planted aquarium.</p>
<div align="right" padding="1% 10%">
<button class="buttonproj" >Find Out More</button>
</div>
</div>
</div>
<!-- ##### -->
<div class="column" style="">
<div class="textcont" style="" align="left">
<h1>CNC Dust Shoe </h1>
<p style="color: aliceblue">CNC Dust shoes are incredibly important when milling any material, especially materials that can be toxic or bad for the user's health. With this project, I aimed to combine functionality with aesthetics to create a highly functional product that looks aesthetically pleasing. The project was designed in Fusion 360 and showcases how highly functional tools can also take on pleasing form. The shoe can be moved up and down, adjusted with ease and the hoover extension can be removed for different additions.</p>
<div align="left" padding="1% 10%">
<button class="buttonproj" >Find Out More</button>
</div>
</div>
</div>
<div class="column" style="background-color:#aaa;">
<div class="imgcont" style="background-image:linear-gradient(
to left,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 1)
), url('https://jackdaly.github.io/images/cncshoe (3).png') "> </div>
</div>
<!-- ##### -->
</div>
I have two other boxes with the same code and the text stays inside but in the last box the text stays outside, if anybody could help.
HTML:
<div class="third">
<div class="brooo">
<img src="brooo.png" height="200" width="200" style="border: 1px solid black; margin-top: 20px; margin-left: 30px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
</div>
<div class="thirdd">
<p>BUSINESSES</p><br>
<p>Buy mega companies or small business such as gas stations, clothing stores, bars and more... <br><br>
Employment rankings from 1 man jobs(taxi/gas station) to multi-level "businesses" that require CEO, VP(lieutenants), and standard employees. <br><br>
Do you have what it takes to run a company that supplies the city with common commodities?</p>
</div>
CSS:
.third {
margin-top: 30px;
background-color: #2F3030;
border: 1px solid grey;
height: 250px;
}
.thirdd {
color:rgb(255, 255, 255);
}
Your third div have this property: height: 250px.
It's much small to contain all it's children.
remove this property and the parent div will expand to contain it's children.
It seems the text is super long and not being told to be contained within the div.
You can try adding this CSS to the thirdd div
word-wrap: break-word;
or perhaps try this to that same div if the above not working
overflow: auto;
I'm trying to make a floating menu for one of my projects but I can't get the overflow to work as I want and it drives me nuts as I know that I've managed to do this before.
My aim is to have the #preferencescontent div to only stretch to the lower edge of #preferencesholder and utilize scrolling if the content is larger but it just keeps going.
Here's the code (codepen below):
<div class="lightbox" id="preferencesdiv">
<div id="preferencesholder">
<div class="sidemenu">
<div id="deviceoverviewbutton" class="menuitem">Device overview</div>
<div id="irulesbutton" class="menuitem">Defined iRules</div>
<div id="certificatebutton" class="menuitem">Certificates</div>
<div id="logsbutton" class="menuitem">Logs</div>
<div id="preferencesbutton" class="menuitem">Preferences</div>
<div id="helpbutton" class="menuitem">Help</div>
</div>
<div id="preferencescontent">
<div id="helpcontent">
<h2>Tips and tricks</h2>
<h3>Filtering for pool members being down</h3>
<p>This one is a bit of a hidden feature. In the Pool/Members column you can filter on "DOWN", "UP" and "DISABLED".</p>
<p>It's not perfect though since pools or members with any of these words in the name will also end up as results.</p>
</div>
</div>
</div>
</div>
I found a bunch of similar issues but could not get any of the solutions to work for me.
Codepen example:
https://codepen.io/anon/pen/WMvjRw
You have used max-height:80%. Which is not in respect of anything. So use height in px. Like I used 200px.Then you can utilize scrolling when conten is large from your defined height
div#preferencescontent {
overflow-y: scroll;
max-height: 200px;
margin: 10px;
width: 100%;
}
:root {
--alternatetablecolor: #f9f9f9;
--headerbackgroundcolor: #efefef;
--headerfontcolor: #333;
--bordercolor: #dddddd;
--defaultfontcolor: #222;
}
.lightbox {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
text-align: center;
}
div#preferencesholder {
background: #fff;
display: inline-block;
text-align: left;
max-height: 75%;
max-width: 90%;
overflow: hidden;
padding: 0px;
border: 1px #000 solid;
-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
margin-top: 100px;
}
div#preferencescontent {
overflow-y: scroll;
max-height: 200px;
margin: 10px;
width: 100%;
}
div.sidemenu {
background-color: var(--headerbackgroundcolor);
width: 100%;
text-align: center;
}
div.sidemenu div.menuitem {
padding: 10px;
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
display: inline-block;
margin: 0px -2px 0px -2px;
}
div.sidemenu div.menuitem img {
max-height: 30px;
vertical-align: middle;
}
div.menuitem:hover {
background-color: #d0d0d0;
cursor: pointer;
}
div#helpcontent {
max-width: 550px;
margin: 0 auto;
}
<div class="lightbox" id="preferencesdiv">
<div id="preferencesholder">
<div class="sidemenu">
<div id="deviceoverviewbutton" class="menuitem">Device overview</div>
<div id="irulesbutton" class="menuitem">Defined iRules</div>
<div id="certificatebutton" class="menuitem">Certificates</div>
<div id="logsbutton" class="menuitem">Logs</div>
<div id="preferencesbutton" class="menuitem">Preferences</div>
<div id="helpbutton" class="menuitem">Help</div>
</div>
<div id="preferencescontent">
<div id="helpcontent">
<div id="helpcontent">
<h2>Tips and tricks</h2>
<h3>Filtering for pool members being down</h3>
<p>This one is a bit of a hidden feature. In the Pool/Members column you can filter on "DOWN", "UP" and "DISABLED".</p>
<p>It's not perfect though since pools or members with any of these words in the name will also end up as results.</p>
<h3>Filtering for pool members being down</h3>
<p>This one is a bit of a hidden feature. In the Pool/Members column you can filter on "DOWN", "UP" and "DISABLED".</p>
<p>It's not perfect though since pools or members with any of these words in the name will also end up as results.</p>
<h3>Filtering for pool members being down</h3>
<p>This one is a bit of a hidden feature. In the Pool/Members column you can filter on "DOWN", "UP" and "DISABLED".</p>
<p>It's not perfect though since pools or members with any of these words in the name will also end up as results.</p>
<h3>Filtering for pool members being down</h3>
<p>This one is a bit of a hidden feature. In the Pool/Members column you can filter on "DOWN", "UP" and "DISABLED".</p>
<p>It's not perfect though since pools or members with any of these words in the name will also end up as results.</p>
<h3>Filtering for pool members being down</h3>
<p>This one is a bit of a hidden feature. In the Pool/Members column you can filter on "DOWN", "UP" and "DISABLED".</p>
<p>It's not perfect though since pools or members with any of these words in the name will also end up as results.</p>
</div>
</div>
</div>
</div>
On desktop, my button looks great. When I go to mobile version, the button goes outside of the screen width like below:
1) How do I keep this from happened based on my bootply and code below
2) How do I add a top margin to the button too.
Here's my bootply:
http://www.bootply.com/KChuJgr967
Here's my html:
.content-section-d {
padding: 50px 0 0 0;
}
.centered-text {
text-align: center
}
/* Buttons */
.btn,
.btn:link,
.btn:visited {
font-family: 'Lato', sans-serif;
font-weight: 700;
padding: 15px 40px;
background-color: #db4632;
font-size: 20px;
letter-spacing: 0;
text-transform: uppercase;
border-color: #db4632;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)
}
.btn:active,
.btn:hover {
background-color: #db4632;
}
<div class="content-section-d">
<div class="container">
<div class="row centered-text">
<div class="col-md-4 col-xs-12">
<h3>4,000,000+</h3>
</div>
<div class="col-md-4 col-xs-12">
<h3>1,500,000+</h3>
</div>
<div class="col-md-4 col-xs-12">
<h3>150,000+</h3>
</div>
</div>
<div class="row centered-text">
<div class="col-md-4 col-xs-12">
<h3>68,000+</h3>
</div>
<div class="col-md-4 col-xs-12">
<h3>2,000+</h3>
</div>
<div class="col-md-4 col-xs-12">
<h3>3 years</h3>
</div>
</div>
<div class="col-lg-12 text-center">
Register for a Free Account
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-d -->
So, as I noted in comments you need to use #media.
Here, a code for your button, which your should add to stylesheets.
#media(max-width: 1200px) {
.btn span {
display: block;
max-width: 200px;
white-space: normal;
}
}
Also, don't forget about add <span> to your button. Now button code is:
<button href="https://www.apple.com" target="_blank" class="btn btn-primary btn-lg"><span>Register for a Free Account</span></button>
And here is full working example on JSFiddle.
P.S. Change max-width in #media to your property.
You can use vw and vh CSS rules to change the size of text according to the screen size. In your case if you add this:
font-size:3vw;
font-size:1.8vh;
It works pretty well. (Play with values to get exactly what you need)