I am building a landing page with 3 sections (haven't coded the 3rd section yet).
Each section needs to be 100% of the screen.
Top 2 sections have 2 columns each.
I am using Flexbox for this, and everything looks great as long as the browser is in full screen, and the sections have no content. When I start adding content inside the sections, then resize the window, sections start overlapping, especially when resizing only vertically.
When resizing horizontally it's not a problem, since I can switch flex-direction:column; to flex-direction:row; to get them to stack.
How can I get a 100% view of the section while making everything responsive when window is resized and prevent overlap?
Would CSS Grid be a better option here?
Here's a Code Pen. Please slide the code pane up, then resize your window, and you'll notice how the second section overlaps on top of the first section's button, text, and image.
Code Pen: https://codepen.io/MarwanAK10/pen/eYedLoZ
If you try removing the button, paragraph, and image from the html, then the problem is gone, and on resize the sections don't overlap...
Thanks!
You can use #media queries for different size screens. So you can display everything differently depending on the screen size. You can view the documentation here.
Maybe put overflow:hidden on section
Related
My navbar overlaps/wraps to a second line when the screen resizes/reduces. This looks messy. I have used a toggle button for media devices, but this doesn't address the issue of when people resize the window.
There are two websites I can give an example of what I am hoping to achieve with my navbar/page:
https://www.facebook.com/
http://www.dailymail.co.uk/home/index.html
Note with both of these websites, that when the screen is resized, the page remains the same; although the window is reduced, nothing on the page is reduced. The navbar remains the same.
This is what I would like to achieve, but I'm not sure how?
And is it possible to achieve this with just the menu/navbar? Rather than making the whole website fixed in position?
All replies will be much appreciated!
Thanks!
John.
Try to style your navbar elements with display:table-cell and parent should be display:table.
Or you can go with flex.
I'm building a site with various background images with content laid on top of it. The way I have it now is not working because when I view the site on a mobile browser, some of the elements get pushed to the left leaving an ugly white space on the right.
This is because the elements that are being pushed aren't contained within a wrapper. However, I am not sure how to lay out all of the elements especially with the various background images that they need to be laid upon.
I've created a simple image of how the divs are laid out.
Note: All the text 100% width, etc is referring to the divs under the red transparent boxes (the content). The actual site can be viewed here.
Can someone help me figure out how I should build the HTML properly for the layout of this website? For example, should I split the top half and bottom half to #top and #bottom with a wrapper within each? I'm stuck as to how I should approach this.
It seems that all your widths are based on pixels when (for responsive results) should be percentages.
What is ruining your iPhone layout seems to be the pinboard ID at 1122px with a margin of 47px. That is much wider than the other divs above and below.
However, fixed layouts can be applicable to mobile. See -> fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
I am an HTML/CSS novice and am trying to build a website for my wedding next year. On the main page here I have identical ribbon images on either side of my main div. What I want to happen is that the site remains centered no matter the screen resolution (showing more or less of the ribbons on either side depending on the resolution). It seems to work for the left ribbon but the right does not want to cooperate. The issue is particularly bad on iPads where the entire site appears left justified and the entire right ribbon is visible.
Any help would be welcome,
thanks.
apply the following css to html:
overflow:hidden;
applying overflow:hidden to the img won't work, the img isn't overflowing relative to its own width. (in contrary to how you think the overflow property would work)
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
I'm essentially trying to design my header and footer how it's done at StoreEnvy. They have a large (2400px wide) header and footer, which are always centered. When you resize the page horizontally, th same part stays centered, but new parts of the image are exposed along the end of the browser window.
I've tried setting up my document like this, but I can only either 1) Get the image the resize to fit the entire window, or 2) have scroll bars totaling the width of the images.
ANy idea what I may be missing??
Thanks!
Make the image a CSS background and center it. Then it will crop as expected. There are other methods but this is the easiest.