I am using this tutorial to create an overlay on my images with text:
http://codepen.io/pdelsignore/pen/uqenH
It works great, however I have a responsive website and if I try to enter a % as the width / height of the '.box' the image disappears. It appears it can only be a fixed with (i.e. px) which obviously doesn't scale.
.box {
cursor: pointer;
height: 250px;
position: relative;
overflow: hidden;
width: 400px;
font-family: 'Open Sans', sans-serif;
}
Does anyone have any ideas? Thanks in advance!
Try giving min-width and min-height a try.
min-width: 100%;
min-height: 100%;
In live project usually we use any responsive framework. Like bootstrap or foundation. So I think you could ignore as framework will handle this properly. No need to use any % to make it responsive. For Bootstrap we use
<div class="row">
<div class="col-md-4">
<div class="box">
<img src="http://files.room1design.com/oldcity.jpg"/>
<div class="overbox">
<div class="title overtext">
Walk This Way
</div>
<div class="tagline overtext">
Follow the path of stone, a road towards an ancient past
</div>
</div>
</div> <!-- End box -->
</div> <!-- End Col-4 -->
</div> <!-- End row -->
I believe the dimensions of .box as a percentage would be based on the height of the parent. since no height is specified on the body it has no frame of reference. try adding the following to get percentages working on .box.
html, body {
height:100%;
}
here is an updated codepen with a few other changes to illustrate the use of percentages after giving your body dimension.
http://codepen.io/anon/pen/dPREBE
Related
Whenever I resize the window, some spaces are not filled with image I coded to insert. Actually, I tried to handle this many times with several approaches.
Here are some parts of my code.
(I use jquery, jquery-ui, and bootstrap)
HTML
<div id="carouselSection" class="carousel slide" data-ride="carousel">
<!-- Indicators are skipped -->
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="carouselImage">
<div id="black">
<img src="img/carousel_img_opt/slide_001.png">
</div>
</div>
</div>
</div>
CSS
.carouselSection {
height: 100%;
width: 100%;
}
#black {
width:100%;
height:auto;
background: rgba(0, 0, 0, 0.7); /* for darkening */
position:absolute;
top:0;
left:0;
background-image: url('bg_dim.png'); /* for checkered */
background-repeat: repeat;
z-index:10;
}
.carousel-inner .carouselImage img {
/*position:absolute;*/
width: 100%;
height: auto;
top:0;
opacity: 0.5;
background-size: cover;
background-position: center center;
}
I made this function for adjusting carousel part (of course including images) to the window's size.
function resizeCarousel(){
$('#carouselSection').css('height', $(window).height());
$('.carouselImage, #black').css('height', $(window).height());
// $('.carouselImage img').css({'top': 'auto', 'left': 'auto', 'min-width': '100%'});
}
The comment part is problem.
If I change the .carouselImage img's css "min-width' make '100%', and then making window longer (vertically), just #black part is showing without image.
Or I change that img's "min-height" make "100%", and then making window widely (horizontally), #black part is showing without image.
So, I made both height & width 100% when resizing, then image go stretching. (But I don't want that stretching because it's ugly ㅠㅠ)
Does anybody know how to handle this problem?
Actually, I want this kind of effect (main images within carousel slide) in https://www.linefriends.com/.
I tried to copy the html(including js file), css code from that website. But I didn't get any idea from it.
(Actually, it seems like there's a little bit of zooming in/out effect on linefriends' website. But I could not find that effect on the code. I think the effect that I want might not the problem of height or width. But, if you catch how to build linefriends' effect, please let me know.)
Thanks for reading!
If you give your slide container a static height (you can use height: calc(100%);, you can use background-image and background-size: cover; to display an image which does NOT stretch when resized. See code below:
<div class="item active">
<div class="carouselImage" style="background-image: url('img/carousel_img_opt/slide_001.png');>
<div id="black">
</div>
</div>
</div>
I'm currently on a MacBook with the display dimensions of 15.4-inch (2880 x 1800) here is a screenshot of how each section of my website looks for my homepage.
#app (section1)
#section2 (section2)
#section3 (section3)
----------
ISSUE ONE
How can I fix my h3 text to ensure it's responsive on a mobile device and it fits to be seen on a mobile device. Here is a screenshot below of how it looks as you can see it doesn't adjust and fit on the screen correctly. If you look at the JSFIDDLE link to my site at the bottom of the post you can see I have used <div class="col-lg-12"> to ensure it's responsive therefore, no idea why it's going this on mobile devices.
<h1 class="maintxt bounceInUp animated">Hi, welcome to my portfolio</h1>
<h2 class="maintxt bounceInUp animated">My name is Liam Docherty</h2>
<h3 class="cd-headline bounceInUp animated loading-bar">
<span>I'm a</span>
<span class="cd-words-wrapper">
<b class="is-visible">Front-End Web Developer</b>
<b>Graphic Designer</b>
</span>
</h3>
Here is a screenshot of a mobile device view of my website showing the issue.
JSFIDDLE
white-space: nowrap will prevent the text from wrapping on small screens. Remove that from .cd-words-wrapper b:
.cd-words-wrapper b {
display: inline-block;
position: absolute;
width: 100%;
text-align: center;
left: 0;
top: 0;
}
https://jsfiddle.net/wdafatrx/8/
You could also use vw and vmin units to keep them inside the screen.
.cd-words-wrapper b has white-space:nowrap set - this will cause all text inside it to stay on one line. Removing that is the fix to your responsiveness issue.
Use a media call in your css;
#media screen(max-width: 480px) {
<!--your div class name--> h3 : <!--new font size--> }
Hello there I have an application that shows data in a grid fashion here is one of the "blocks" out of the grid below. Within the Divs that fill out data from a JSON file and fills the divs.
The data is limited to 4 characters (a number between 0 and 9999) for all the items. However when there is 1 character in there it looks too small because i have to keep the font size fairly small so when there is more than 1000 it doesn't overflow.
My question is what would be the best way to automatically adjust the font size for each div independently so that it always fit's at a maximum size
<div class="box">
<div class="Top">ZW01025</div>
<div id="ZW01025" class="Midbox">
</div>
<div id="ZW01025b" class="Midbox">
</div>
<div id ="ZW01025C" class="BottomboxPercent">
</div>
<div id ="ZW01025D" class="BottomboxPercent">
</div>
<div id ="ZW01025p" class="Bottombox">
</div>
</div>
He is a fiddle of the full thing, it doesn't really fit in Js fiddle well http://jsfiddle.net/RYU54/3/
If you are ok with using a JavaScript solution I would check out flowtype.js
http://simplefocus.com/flowtype/
Add font size in the .Top css class, lik this:
.Top{
height: 20%;
width: 90%;
margin: 1px auto;
background-color: #596163;
text-align: center;
color: white;
font-size: 30px; /* added */
font-size: 3.5vw; /* added */
...
}
I made a script to automatically scale text to fit the surrounding div, it should work in your case:
https://github.com/jeremiahrose/perfectFit.js
I tried to display my photos horizontally, so i used
.stream {
white-space: nowrap;
}
.mod-pic {
padding-left: 5px;
}
.modelstream {
display: inline-block;
max-height: 90%;
width: auto;
}
for my photo's css
html looks like this: (I used javascript to render the photos)
<div class="stream">
<div class="alexContainer"></div>
<div class="template main alexTemplate">
<div class="mod-pic">
<img class="pic modelstream" src="" alt=""/>
</div>
</div>
</div>
The problem is when I resize the browser, the margin of the photo become too big, although
I want the photo to be responsive, but I don't want the margin between photo become too
big.
Can anyone help me to fix this problem? I would really appreciate it!
Thanks
It looks to me like your container div/divs are becoming too wide when the window is re-sized. I think using CSS to set the max-width on one or more of the outer divs would solve your problem.
As the title suggests, I'm using Stellar.js. I only have one parallax element, and it's very simple. It's a section with a background image. The background image is set to fixed (like the documentation says to do to avoid jitter), but the image is still jittery--somewhat in Chrome, really bad in other browsers. It doesn't change when I remove the fixed CSS either.
Here is the element:
<!--Testimonial Section-->
<section id="testimonial" data-stellar-background-ratio="0.5" data-stellar-vertical-offset="-900">
<div class="container">
<div class="row">
<div class="span3 margin-30">
<img src="img/testimonial-img.png" alt="Title">
</div>
<div class="span9">
<h2>“Lava has been an asset to our company by providing us with a cutting edge look and a web presence that shows off our work and skills.”</h2>
<div class="testimonial-source pull-right">Jeff | Ceo - Creative Company</div>
</div>
</div>
</div>
</section>
And here is the CSS:
#testimonial {
background: url(../img/studio-10.jpg) no-repeat center;
background-size: 2000px 2000px;
background-attachment: fixed;
padding-top: 120px;
padding-bottom: 120px;
}
Pretty straightforward. Any advice?
The problem wound up being an image tag that was in the same div as the background image that was involved in the parallax scrolling. Upon removing this image, jitter stopped.
Have you tried using smaller images? Those used in stellar's demo are smaller (1280x640px) and do not have the background-size property. Try with smaller image and/or without the background-size property - that may cause those performance problems.
try this
#testimonial {
background: url(../img/studio-10.jpg) no-repeat 50% 0 fixed;
width: 2000px;
height: 2000px;
padding-top: 120px;
padding-bottom: 120px;
}
I know this is an old question but changing $.stellar() or $(window).stellar(); to :
$.stellar({
hideDistantElements: false
});
solved the flickering issue for me.