An example of the page in question: https://rhstrategic.staging.wpengine.com/team/brandon-blackwell/
I have kind of a specific situation here in which I have a block div that is staying aligned left and using only a 50% width when the screen is sized below 960px (The name block in the red banner part at the top). I tried altering the CSS to make the width 100% but the problem is that the height seems to be being generated dynamically with with width (If I increase the div width to 100% the height doubles as well).
I can't figure out how to separate the height and width and I don't know where or what file these CSS changes are being dynamically generated from. It looks kind of like an HTML5 data object but I'm a bit new to these types of things so I'm not sure how to change it. When it gets down to 650px it seems to behave as I want it to. But between 650-960px it is left aligned.
All I need it to do is when the page goes down to 960px or below, I need that part that is left aligned currently to be full-width across the page and centered. Any ideas?
Just a warning: I'm not 100% sure that this answer will work correctly... My idea is to put this style in the div:
div{
width:100%;
height:50%;
}
Couple of things I would like to suggest:
If you are new to front-end designing, I would recommend you to understand the grid system of a HTML page. Learning Bootstrap will be a perfect start for you.
Now you want to make your website fluid, so take a look at CSS media query. This will help you to achieve responsiveness.
Happy Coding..
Related
I'll try my best to explain this as clearly as I can. I'm also using the Bulma CSS framework if it matters. So the layout I'm trying to create is this.
I created a working version that can be seen in action here
However, in the working example the vh/px of the scrollable box is fixed to a certain amount and I'm using tiles from the Bulma CSS framework. I tried using columns and the same outcome occurred. If I was to not make it a fixed amount, it'll just extend past the screen, but I want it to fit the entire screen regardless of the size and the only scrollable part should be the green box I've showed above. Also, the box may not even have enough content to become scrollable in some cases, and in that case I would still like it to fill up the rest of the height with the box even if it's going to be empty.
As you can see here, if the height isn't explicitly set, it'll keep going past the screen, but if it's properly set it will work as intended. I'm wondering how I can make this height fill the space properly no matter how it's resized and etc.
Any help would be appreciated!
It sounds like you should set the height property on the wrapper of the content and set the overflow: scroll; Then all of the contents will be the height you set and have scrollable content.
I'm working on an enjin site for a friend and cannot for the life of me understand how to make the page here stretch to fill the whole screen vertically if the content does not have enough in it to do it on it's own. I've tried scripts and CSS of a dozen or more solutions and cannot understand how to make it do this because it's not my code, its Enjin's, and I have to work around it.
There are 2 pages in question, one is a standard format page so anything done to it can be done to all pages except the custom one and there will be no problems, and the other is a custom coded page using their HTML module. The key is the same solution is necessary for both but they have different code.
Custom Page: X |
Standard Page: X
Simply put I'm asking for a solution here. I tried the flex solution, height 100% with block display, javascript to find the distance between the bottom of the bottom div and the bottom of the monitor and adjust height accordingly, and more. Nothing seems to work. Any help is very gratefully appreciated.
I can provide any more details necessary, just ask.
What you are trying to accomplish is 2 things. First you want to make the div #memberContainer always be at least as tall as the users screen minus the height of your footer.
This can be acomplished with css using the "vh" unit. The vh unit is defined like this:
Relative to 1% of the height of the viewport*
And the calc function, as you will need to subtract 100vh (the screen height) from the height of your footer (180px).
So you need to add this code to your #memberContainer.
#memberContainer{min-height: calc(100vh - 180px)}
The second thing you need to do is make sure the background image of #memberBlock always covers the entire visible portion of the screen.
The image itself is 1920*1080, which is a standard 16:9 resolution. Assuming you only wanted to target 16:9 screens this would work fine. However to cover mobile phones and all other screens I would recommend you use:
#memberBlock{background-size:cover}
This makes sure the image will always cover the screen.
You can't have no gap and no content to fill it. There will have to be a gap somewhere.. Your gap is appearing in the middle because the footer is absolutely positioned. If you stop positioning your footer absolutely, the footer will cling to the body-wrap, however, you will still have a gap at the bottom, it just won't look as bad.
.myfooter {
display: none;
width: 100%;
position: relative;
background-color: RGB(20, 20, 20);
height: 180px;
bottom: 0;
}
If you really wanted to make it fit the screen, you could give a min-height with a calc of 100vh-FooterHeight
position: absolute;
height: 100%;
There may be other issues with this as i have no idea how mobile or responsive stuff would work for your site specifically but this is one way. You are coupling the BG div to the content div - that is why you are seeing that behavior - you need to make the BG a sibling div of content instead of a parent child relationship then you can have more flexibility on how it works - but for now my option seems to work
I am trying to create a web page. It has two regions left and right content. Till now i am testing it on a particular window size where it is lying in center and size is exact fit. But as soon as i minimise it or open it on monitor of different size it is not getting resized based on it. How can i do it. here is the web link i am working on.
http://jsfiddle.net/efyJF/.
If you see, right now the content in side is fixed size. So, i need to scroll all the way to the right to see the end of right content border.
I feel like this is not the way the normal web pages work. How can i fix this.
Thanks
You can define your css value using percentage like width: 20% instead using fixed value. Or try to use css framework like Blueprint or 960 Grid System.
If I understand right, you are looking for something like this
The container has a property of margin: 0 auto; which puts it in the centre, and then the children divs take up a percentage of that parent div. The parent (#container) can be resized and the children will fill it up appropriately.
The mistake you made was using absolute positioning, this will perfectly align it for your screen, but other screens won't look the same.
Sorry for the title, it's a hard issue to summarise. At the moment, I have a website which looks like this:
(as you can tell, it is inspired by Metro). I have uploaded it to jsfiddle here: http://jsfiddle.net/r46bY/4/embedded/result/
The div surrounding everything (represented by a dotted border) resizes to fit the user's browser window and I want the buttons (which are simply coloured divs) to do the same but can't figure out how. At the moment, they're in place using absolute positioning and based on a particular screen size. I would like them to keep the same layout but resize along with the container div.
I've experimented with liquid values in CSS, but I can't get the positioning right.
Please help.
Use only percentages instead of pixels for your dimensions (including margins). At resize you only have to resize the surrounding div, and the content should take the right dimensions.
I am using jQuery Masonry to display a grid of boxes (all the same size).
Here is my testing site.
Works great when the browser width is 1100px or below.
When viewing it at 1270px and above, Masonry keeps adding columns on the right hand side.
I have a max-width set on the outer container, but Masonry doesn't seem to acknowledge it and just keeps expanding the width of the Masonry container.
On the Masonry Centered page, you can see that it is centered, but there is no constraining width. As you increase the browser width, it just keeps expanding and adding more columns.
How can I add a hard rule to say, "This is the maximum width. Stop trying to add more columns."
Thanks
UPDATE
Here is a jsfiddle, although I"m not sure if it's even set up correctly. It's best just to go to my testing site to see the problem.
Setting a max-width on the parent element of the masonry'ed container works for me. Is this not the result you're looking for?
#wrapper { max-width: 990px; }