I was looking at this code and there is something I don't understand. You can live preview this website.
My question is : How is the height of the "Download" section (All the buzz, the yellow one) set ?
I looked in the css but didn't find anything relative to the height of this section.
Also I know that it's a pattern in the header but is there a trick to make the background-image not to move when resizing the page? (Like it does with the pattern ? Cropped)
Thank you
The height isn't really set. The height is coming from the size of the content plus padding: 150px 0; set on the container. So the height is content plus 150px top and bottom padding.
Related
I have the title of a page displayed in an orange box at bottom of header (see image above). This box currently has padding-left set to 15% which makes it match the margin-left of the text below only if the window width is right. But if the window size changes they no longer match (see image below).
I want the text to be aligned left in all window sizes. I did try "padding: 0 calc(50% - 540px);" for the title but that only works as long as the width of the containers are 1080px or wider. More importantly it doesn't seem to work in Microsoft Edge which is necessary.
Any suggestions on how to do this? Is it possible without changing the structure of my elements?
I would suggest that you used bootstrap if you want your page to be responsive.
There is Bootstrap Spacing https://getbootstrap.com/docs/4.0/utilities/spacing/
Im trying to resize jumbotron so that it fills the entire screen. Basic site, just a row of nav pills with 1 giant jumbotron under it. I have only been able to find info on changing the width of a jumbotron
Yes, it's possible to change the height of a jumbotron. In the css of your code for jumbotron like chdltest said:
"Apply a height of 100% to the jumbotron, it's containers, body, and html"
The code for this should be something along these lines:
.jumbotron, body, html {
height: 100%;
width: 100%
}
This makes the height and width 100% for the jumbotron (if it's a class, if it's an id #jumbotron), body and html. Though keep in mind this needs to go after the declaration already of the height and width for your jumbotron, body and HTML. Though I'm assuming your linking this all to a separate css file.
Another similar question though not specific to the jumbotron was Make div 100% height of browser window. In the answer to this question it goes into viewports as an alternative to using the height:100%;, James goes into height:100vh;, which could be another alternative.
Apply a height of 100% to the jumbotron, its containers, body, and html.
Giving a height of 100% to only the jumbotron will only tell the jumbotron to have the height of its container (which I don't know what your structure is like because you did not provide anything other than a question).
Applying a height of 100% to its containers as well as to the body and height will enable it to be the full height of your screen.
How do I get rid of the white space on either side of my website?
I want the backgound to be flexible to fit the browser window for whatever size it is. I think I need to resize the div container but I'm having lots of trouble.
http://www.dropshiplounge.com/
Your website was built using a fixed width and a margin that aligns it in the middle of the page using this rule in your css.
margin:0 auto;
Everything within your site has been built to within the specification of your wrapper width. Most responsive sites still have a page wrapper and a maximum width. If it's the white space that bothers set a background to the body element
body{background:color;}
or for an image
body{background-image:url('background_image_url')}
While im not the biggest fan of W3C refer to this for more information if you get stuck - http://www.w3schools.com/css/css_background.asp
If you are concerned that your site doesn't respond to different screen sizes and browser resizing then consider hiring a professional to redesign your site for responsive design.
Is this fiddle more or less what you're looking for?
I removed the hard-coded width on global_container_ and set width: 100%; on the header, along with repeat-x for the header background. I removed float: left; from the header and it's child elements, and made sure the child elements had left- and right-margins of auto. I also removed the hard-coded width from the headline, but you'll have to move the bottomline outside of it's container if you want that full-width as well (or remove the hard-coded width from the container).
Also, I don't think I had to change this in the fiddle, but you may need to remove the clearfix class from global_container_, or set it to display: block; in order for the full width to take effect.
It's the same idea for the footer - set it to width: 100%; and adjust the footer and child elements' padding and margin until they're placed where you want them.
Whenever my website is viewed with a resolution that is insufficient to display the full page, a horizontal scrollbar is added. The problem is that my 100% width div with background image does not apply this background image to the portion that extends beyond the scroll bar.
This same issue is actually appears here on Stack Overflow as well. If you shrink your window small enough that you have a horizontal scrollbar, you can see that both the header and footer div areas do not extend the background image/color.
One way I have figured to resolve this is to set the header/footer div to fixed but then the content past the end of the div is lost :-(
Anyone have any suggestions or a workaround? ty!
When you set an element to 100% width it will have the same width as its parent element. The body tag's width defaults to the width of the viewport. According to the standard, when an elements contents is to big to fit in it, it will overflow. This is what you're seeing.
To get around this, set the min-width on the body tag. Something like the following, obviously change the width to whatever works for you:
body {
min-width: 960px;
}
Surly if you used something along the lines of
body{
background: url("yourdir/yourimage.jpg") repeat repeat;
}
Instead of having a background div? It'd be helpful if you also added the code for the background div
This margin is a browser scrollbar that appears during resizing and makes viewport smaller. This can be easily fixed by adding hidden overflow to body. Check #242684
What I want to do is have a way to horizontally scroll through the icons on the top bar. No matter how I try to implement overflow I cannot get it to work. Here is a link to the page. Link no longer exists.
Note: that the scrollbar shall not cover the background image at all. It should be immediately below.
You need to set the width of that header div to be wider (width:2000px;). If you want a dynamic width (you dont know how many boxes will be in there) then you'll have to calculate the width with javascript (or serverside code like PHP).
Giving the .browser div a width of 2000px does the trick... then adjust the height of your divs to be tall enough to show the whole icon and name.
Let me know if that makes sense...