I recently bought a parallax template, and I am trying to make a website by modifying the code to my needs. The template I use have a full screen slider at the top of the one page parallax theme, marked as id="home". For some reason, this section is set to 100% height, but I want to change this.
In the template, the original code is as follows:
#home.home-fullscreenslider {
background: url(../images/pattern.png);
position: relative;
overflow: hidden;
height: 100%;
}
And this initiates the slider:
<div id="home" class="home-fullscreenslider">
</div>
I deleted the height of the slider, so now I can fit the images to the screen properly. But the whole section is still at 100% height. I couldn't find any portion of the css code that dictates the height of #home. What do I need to do?
Related
I'm working in a rails Instagram-like project where users can submit posts, each with a corresponding photo.
My objective now is to create a div that contains both a header (with some information) and a photograph. (
So my html.erb is something like this:
<div class="post-content">
<div class="header">
<!-- some other code here -->
</div>
<div class="photo-container">
<%= image_tag(post.image_url, class:'img-responsive') %>
</div>
</div>
The tricky bit is that:
1. I'd like to make the the "post-content" div of a particular 'fixed' size regardless of the size of image the user uploads.
2. The image to cover the whole "post-content" div without cutting out any overflow.
3. For the image to be responsive - I'm using Bootstrap.
So far my relevant scss code is like:
.post-content-panel {
width: 60%;
margin: 0 auto;
padding: 0;
// height: 300px; I'd like to fix this.
}
.photo-container img {
max-width: 100%;
height: auto;
}
This works partially. The image is responsive, covers the whole div but unfortunately the height of the parent div expands or retracts according to the image height.
I've tried to:
1. Fix the post-content-panel height but this
2. Transform the image with transform: scale(0.5) but although the size is reduced the image doesn't cover the whole container div.
3. Standardise image sizes at upload in Carrierwave (gem I'm using in the backend). I used resize_to_fill and resize_to_fit without success (either the image is cut or it gets deformed.
How could I make this work. Is it a Carrierwave issue so I images are not cut when resized or could you see any css solution here regardless the size of the image. Thanks
I am trying to accomplish this:
http://unity3d.com/community
A full width header image under the navbar: what's the best Bootstrap 3 approach to accomplish this?
I was able to move the jumbotron outside the main container using this tutorial:
http://www.tutorialspoint.com/bootstrap/bootstrap_jumbotron.htm
Now the challenge is to move the navbar back to it's original position at the top of the page (it is currently displayed just after the jumbotron)
Thanks.
Try adding up some custom CSS and HTML:
HTML:
<div class="background-image"> </div> /!-- Make sure it is right under the closing head tag! --!/
CSS:
.background-image {
height: 400px;
background-image: url('community.jpg');
width: 100%;
position: absolute;
top:0;
z-index: -100;
}
After your background div, you can put your jumbotron and customize it. Make sure your image is wide enough ( 1920px is a good width) so that it will look ok on all resolutions. Also, the height must be fixed , otherwise the image is going to take up your whole page.
I have a wordpress website called www.ellaror.se
On the first page you can se a slider that is working and covering the whole width of the "content" div.
But when I browse the website on my phone it gets smaller but not the slider, it is still 1000px width.
Here is the CSS that I have added on my own that becuase i wanted the slider a little bit more wider so it will cover the whole page and a little bit to the left and up:
#soliloquy-container-268 {
margin-top: -100px;
width: 1000px;
margin-left: -76px;
We also have this CSS code snippet in our HTML (#soliloquy-container-268):
style="max-width: 1000px; max-height: 300px;"
I know that the slider won't get smaller because I have given it width:1000px; but is there any smart way to make so the slider will cover the whole content page and gets smaller at the same time when you browse it on you phone?
Give the slider this CSS value -
#soliloquy-container-268 {
max-width: 1000px;
width:100%;
}
I am kind of a beginner in css and I have tried to see if I can find a solutions for my problem with getting my content not to show under my transparent header when there is a need to scroll. I have checked the following post but I can't make this work. I would be extreamly happy if I could get some guiding into this if possible. I attached a visual of my problem if it is of any help. www is www.portaponte.com Thanks in advance!
Hide scrollable content behind transparent fixed position divs when scrolling the page?
Well, Although not perfect, I'll go with an answer:
The problem with this solution is that scrolling will work only when hovering the scrollable content, meaning that you wont be able to scroll if your mouse is outside the big text container. That being said, thats what I thought you could do:
First of all, wrap the #casing div in a #casing-wrapper div, getting something like this:
<div id="casing-wrapper">
<div id="casing">
lots of content here...
</div>
</div>
Then you'll need to style this new div this way:
#casing-wrapper {
width: 800px;
position: fixed;
left: 50%;
margin-left: -400px;
top: 90px;
overflow-y: scroll;
}
Also you'll need to add some jQuery to set #casing-wrapper's height depending on window's height:
jQuery(document).ready(function(){
setWrapperHeight();
jQuery(window).resize(function(){
setWrapperHeight();
});
});
function setWrapperHeight() {
var height = jQuery(window).height();
var margin = 90;
jQuery("#casing-wrapper").css({"height":height - margin});
}
And that's all. Doing this, we created a new layer containing the scrollable content that has the window's height minus 90px. Those 90px come from your header's height plus it's top margin. Since the wrapper has position: fixed, it won't move on scroll, but it's content will. On top of that, with the overflow-y: hidden; property we clip any overflowing content, resulting in the text not being visible under your header.
Anyway, in my opinion the result of letting the letters go under the header is cool, and I won't change it :P
The picture you see bellow is a zoomed screenshot of a website. The line you see is about 1,000px wide. And if you zoom, the size of de website changes, except the size of the line. So the line is keeping his width and pushing the website out of proportion.
Is there a way I can style this line (it has a div around him) in a way it won't be pushing the content of my website?
So either way I'm looking for a way to make the width of my image variable (but I guess you can only do this using JS) or I look for a way to make this line immune to the zooming so it won't be pushing my website's content...
If their is anything unclear, please say so, I'll try again. I know it's not easy to get a hold on this specific case :)
To ignore the window just do a div#wrap with fixed width and position relative, now all childs will be relative of #wrap, then you can resize the window and all divs will be relative of #wrap, to center #wrap just set margin: 0 auto;
<style type="text/css" media="screen">
#wrap {
width: 960px;
position: relative; /* here is the magic */
/* overflow: hidden */ /* enable here if you ilke "crop" on width */
}
</style>
<div id="wrap">
<!-- YOUR CODE HERE -->
</div>