The web page looks fine. However, when changing my browser window size, the content of the container is pushed up and down. Thus it either leaves a lot of container free space or just disappears (like it is under the next container).
But I would like it to always be inside the container with the same proportions.
Here is my code:
.first {
padding-left: 5%;
}
.second {
padding: 80px 50px 0px 70px;
background-size: cover;
}
.fourth {
margin-top: 7%;
}
.third {
padding-top: 80px;
padding-bottom: 65px;
height: 678px;
position: relative;
width: 100%;
min-height: auto;
overflow-y: hidden;
background: url("http://htmlcolorcodes.com/assets/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg");
background-size: cover;
}
.selling-text {
font-family: Ubuntu;
font-size: 20px;
padding-top: 27%;
text-align: center;
color: black;
margin-left: 2%;
}
.second-block {
background: #F2EADC;
height: 500px;
background-image: url("http://www.planwallpaper.com/static/images/824183-green-wallpaper.jpg");
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="third container-fluid">
<div class="col-md-6">
<div class="device">
<div class="screen">
<!-- Demo image for screen mockup, you can put an image here, some HTML, an animation, video, or anything else! -->
<img src="http://happybirthdaycakeimages.com/wp-content/uploads/2015/05/Yummy-Chocolate-Birthday-Cake.jpg" class="img-responsive first" alt="">
</div>
</div>
</div>
<div class="col-md-6">
<div class="second">
<img src="http://gypsea.com.au/wp-content/uploads/2015/07/freeship.png" class="img-responsive" alt="">
<div class="fourth">
<button type="button" class="button btn-block">MENU</button>
</div>
</div>
</div>
</div>
<div class="second-block container-fluid">
<div class="col-md-6">
<div class="screen">
<p class="selling-text">
See the best cake recipes.
Trusted recipes for chocolate cake,
white cake, banana cakes,
and carrot cakes with photos and
tips from home cooks.
</p>
</div>
</div>
<div class="col-md-6 second">
<div class="videoWrapper shadow">
<iframe width="560" height="315" src="https://www.youtube.com/embed/JM_Q7HR55DY" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
I don't know why JSFiddle doesn't work with jQuery 1.11.1, it looks different from what I see connecting it locally.
Ok, I think that the problem is with the fixed height for your <div class="third container-fluid">, which has a height of 678px. To be more specific: as the columns move when you resize your window, the fixed height is becoming a problem because your container has less px than the combined height of your child elements - the col's.
Here is a JSFiddle where I have just commented out the fixed height
Related
I created a responsive site but some of the images dont resize as I want them to.
See this screenshot:
#img1 {
width: 250px;
height: auto;
margin: auto;
display: block;
background-size: 20%;
}
<div class="row">
<div class="col-md-6" id="mision">
<img src="imagenes/MISION.png" id="img1">
</div>
<div class="col-md-6" id="vision">
<img src="imagenes/VISION.png" id="img2">
</div>
<div class="col-md-12" id="servicios">
<img src="imagenes/SERVICIOS.png" id="img3">
</div>
</div>
You're using a fixed width in the CSS for your image element, try changing to a percentage width, e.g.:
#img1{
width: 80%;
height: auto;
margin: auto;
display: block;
background-size:20%;
}
Then the width of the image should resize with your column.
I want to set the height of the section based upon the child elements but unfortunately I don't know what's wrong with my code. When I try to decrease the size of the screen the content in the paragraph and the img is overflowing.
HTML
<div id="section2" class="about">
<div class="container-section">
<div class="about-content col-lg-6">
<p></p>
</div>
<div class="about-pic col-lg-2">
<img />
</div>
</div>
</div>
CSS
.about{
height: auto;
margin: 0;
}
.about .container-section{
padding: 0;
height: auto;
position: relative;
}
.about .container-section .about-content p{
padding-bottom: 15px;
font-family: 'Lato', sans-serif;
text-align: justify;
}
.about .container-section .about-pic img{
height: auto;
width: 100%;
padding-bottom: 25%;
}
Any suggestions?
Ok, it looks like you're using Bootstrap, right? And Bootstrap is adding some floats, which removes elements from the page flow, and thus the container behaves as if those elements aren't in it. Try adding a cleared div in various places and see if it solves your issue, like so:
<div id="section2" class="about">
<div class="container-section">
<div class="about-content col-lg-6">
<p></p>
</div>
<div class="about-pic col-lg-2">
<img />
</div>
</div>
<div style="clear:both;"></div>
</div>
Found a solution that auto centered my icons (horizontally & vertically) within the container.
But now when viewport is smartphone size, the icons resize very small and the container resizes too large.
<section id="icon">
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-xs-offset-3">
<img class="img-responsive" alt="github" src="http://image.flaticon.com/icons/svg/25/25231.svg">
</div>
<div class="col-xs-2">
<img alt="stackoverflow" src="http://ryangarant.com/stacko.png">
</div>
<div class="col-xs-2">
<img alt="linkedin" src="http://image.flaticon.com/icons/svg/145/145807.svg">
</div>
</div>
</div>
</section>
/*Icon Section*/
#icon .col-xs-2 {
background: white;
height: 100px;
}
#icon .container-fluid {
background: white;
}
#icon img {
height: 100%; width: 100%; object-fit: contain;
}
What are the best practices for keeping icons proportional within its parent container?
Using FontAwesome icons did the trick :)
http://fontawesome.io/
I have a page with the following structure:
<body>
<div id="page">
<div id="header-container">
<header>
</header>
</div>
<div id="main-container">
<div id="main" class="site-main">
<div id="sidebar-container">
<div id="sidebar">
</div>
</div>
<div id="content-container">
<div id="main-banner-container">
<div id="main-banner-holder">
<img id="main-banner" src="http://dummyimage.com/900x300/000/fff" />
</div>
</div>
<div id="content" class="content" role="main">
</div>
</div>
</div>
<div id="footer-container">
<footer>
<div id="footer-images">
</div>
</footer>
</div>
</div>
</div>
</body>
And formatted with the following CSS:
body {
margin: 0 auto;
width: 70%;
background-color: rgb(0,114,187);
font-family: verdana;
}
#header-container {
padding-bottom: 15px;
padding-top: 20px;
padding-left: 35px;
padding-right: 35px;
height: 190px;
}
header {
position: fixed;
width: 66%;
padding-top: 30px;
top: 0px;
}
#sidebar-container {
height:500px;
width:320px;
float:right;
}
#sidebar {
position: fixed;
color: rgb(211,34,52);
padding: 10px;
right: 16.5%;
top:226px;
}
#content-container {
width: 72%;
}
#main-banner-container {
max-width: 900px;
}
Viewing the page on a widescreen shows the content fine. However, as I reduce the window size, or if I view the site on a lower resolution screen, the fixed image and the text underneath it starts to obscure the sidebar, even though it does scale a little. Furthermore, when the page is scrolling, even though some of the text move to make space for the sidebar, the text below it overlaps when scrolled.
A rough example of the problem can be seen here: http://jsfiddle.net/4WQzP/
What changes do I need to make?
EDIT: To clarify, I was hoping a plain CSS/HTML based fix. Javascript is an option, though I'm trying to avoid it since I haven't really used it in this site so far.
for using an adaptive design used two ways)), the first is to use the bootstrap framework, the second is writing media queries
So, I've been trying to create a horizontal scrolling page on my website. I set the entire scroll portion to 400%, as I have four pages. However, I was wondering is it possible(using CSS, jQuery, etc.) to cut up that 400% so that I can use 0-100% for the first page, 100%-200% for the second page, etc.? Or is there another way around this (I've been trying to accomplish this for cross-browser/screen size compatibility). I've only managed to do this so far using hard pixels, but is there a way to change that into percentages?
HTML:
<div id="transition-slide-container">
<div id="transition-slide">
<div id="inner-container>
<div class="slide" id="home">
<h1>home</h1>
</div>
</div>
<div class="slide" id="portfolio">
<div id="inner-container">
<h1>portfolio</h1>
</div>
</div>
<div class="slide" id="about">
<div id="inner-container">
<p>about</p>
</div>
</div>
<div class="slide" id="contact">
<div id="inner-container">
<p>contact<p>
</div>
</div>
</div>
</div>
CSS:
div#transition-slide-container {
background: #bee1ff;
padding-top: 128px;
padding-bottom: 50px;
height: 900px;
min-width: 400%;
z-index: -1;
float: left;
position: relative;
}
div#transition-slide {
white-space: nowrap;
}
.slide {
display: inline-block;
width: 1620px;
margin: 0 auto;
}
div#inner-container {
width: 1024px;
margin: 0 auto;
padding: 0;
}
Website: andrewgu12.kodingen.com
you can set your .slide width to 100% and give background-color: #bee1ff; to your body.
demo
and where is your #inner-container in html?
translition slide should have width of 400% and each slide 100%. The container would be width 100%, overflow:hidden if you want to do this with javascript/anchors or overflow-x:scroll;
you could give 100% width to your .slide class
.slide {
display: inline-block;
width: 100%;
margin: 0 auto;
}