So, i'm trying to design my first page, and kinda trying to learn as i go.
I'm trying to design a one page website, that contains multiple backgrounds, so i divided each section of the website that will contain a different background into divs.
The background looks fine with a full sized window and 100% zoom on the page, but if i zoom in it gives me the option to scroll the page horizontally and it gets messed up, id like to make it so it just simply scales and it does not give me the scroll option.
I've tried setting the background size to cover the page, messed with the width of both the body and the div that contains the background but i can't seem to get it to work.
So, this is part of the page with 100% zoom:
Fully scaled window 100% zoom
But when i reduce the window: it looks like this:
Gives me scroll option and the background image cuts out
Heres the HTML code:
HTML code
And heres the CSS:
CSS code
Thanks, sorry for noob question.
Alright i think i found a solution while just trying different stuff out:
i put on the html and body css:
overflow: auto;
It seems to have fixed my problem, i was kinda of just randomly trying stuff out.
Thx for the help.
Related
I had a programmer code a page for my site, but when we migrated the code to my site (on Shopify), some of the things stopped working. I've been able to fix almost everything, but the top banner is still giving me trouble.
I want it to fill the full browser width (like the other banner a bit further down the page) but it's being clipped to 970px wide. How can I fix this to make it responsive and fill the full browser width? I also want the whole page to be centered under the header.
And the code I'm using is here (I'm including the full code so I don't miss anything important): codepen.io/anon/pen/xZZwZN
When I run it in codepen it works, so I'm wondering if it's clipping it because of the page width coded into my Shopify theme. Any ideas on how to fix/override this on this page only?
Remove float : left from the css of .container .columns to center align.
After changing this, the page looks like below -
Hope that helps!
as i have seen in your site, you just have to remove float:left; from skeleton.css link for particular page
so go in this file and remove from .container .column, .container .columns this class and your site is ok :) If you can't find the class then note line no 26 in your css file.
If you look at what happens here when you reduce the screen width is that the big photo becomes shorter and shorter, still filling in the full 100% of the width:
https://mmistakes.github.io/minimal-mistakes/
Now, I don't find that appealing and would like to make that photo disappear and become a background of the whole top (navbar) part once the navigation bar becomes the button. However, I would like only a certain part of the photo to show up, not the whole width.
Any hints on how to achieve that?
Update: the tricky part here is that each page has its own image. Since this is jekyll, in theory, I could add a css entry in the <head> of each generated page for setting the background image of the navbar, but I'm not sure whether there is a more elegant solution.
Put the picture as a background for your nav-bar and use the css background-position attributes.
Use viewport and let the image (the img-tag) disappear
This is an example of the effect I'm trying to acheive only without using images.
I want to create these screens that take up the entire screen like in the example. But instead of using background images to keep the content position, I'd like to use any HTML content within these screens. I'd also like to eventually ad a parallax effect similar to this.
So let's break it down. I got these background images on these screen elements. The background is fixed so it stays in the same position when you scroll. When you scroll down, the element moves out of view and another comes into view. It gives this effect as though the scrolling is causing a cover to slide up and reveal another screen. I want to keep this effect only without using background images. So I'll need some way to have some content remain fixed and have a contain hide it when it overflows an element that isn't fixed. But, as far as I know, there's no way to do this with CSS alone, am I wrong?
Like I said above, it would be interesting to have the content not remain exactly fixed, but instead slightly move it as you scroll giving it a slightly parallax effect. In order to do that tho, I'll need to use JavaScript. But, that's a bit out of the scope of my question, but I'd like to keep this in mind when coming up with the solution.
Thanks for all help in advance!
I've seen similar questions to do this but so far I can't find any that address the obvious. On my website the top portion is a different color than the body which I created using a div and setting a color to that div. Two simple questions.
How do I get that div to fill the entire portion of the header of the screen regardless if I zoom in or out?
And how do I keep my title and menu bar from falling out when I zoom-in the browser?
I have gotten close so many times but there is always a compromise. Either the div fills the entire header but when I zoom in the text falls out and causes the div to wrap around the page or the menu wraps and it's just gotten frustrating. I hope what I wrote made sense but if not here is a clear example of what I want to accomplish. http://carlodiego.businesscatalyst.com/index.html#home
Notice on this page that if you zoom in or out the top portion remains filled with the same color.
How do I get that div to fill the entire portion of the header of the
screen regardless if I zoom in or out?
simply make the add css with width:100% && margin:auto
I have a problem I haven't found an answer to in similar questions:
I have a site that dynamically resizes a horizontal scrolling image gallery and some text as you resize the browser. That part I have working OK, I just can't seem to get proper control of each respective element.
Take a look: http://john-godwin.co.uk/testsite
If you resize the browser, the large text overlaps the gallery before the gallery starts shrinking, and if you resize the browser small enough, the gallery eventually overlaps the footer as well.
Does anyone know what changes I need to make to the code to make everything stay within a boundary and resize respective of the other elements without encroaching into each elements space?
Thanks in advance.
The CSS can be found in http://john-godwin.co.uk/testsite/css/style.css
Remove z-index:500; in the .content class