Please view what I am looking to do: codepen.io/samiralley/pen/xvFdc
How can I get the nav bar dropdown to show in columns?
Hover over 'Hard Goods' you will see many sections, e.g 'Ashes Caskets' and 'Wood Products'. I want each section to sit next to each other and when it gets to 5 in a row to go onto a new row.
I understand the width would be setting it to 20% which would allow 5 to make the 100%.
For some reason, I can not get it working.
There is a lot of CSS classes so I thought it would be easier to just use Chrome's inspect element?
Thanks,
Danny
This is not exactly what you asked but is quite similar. This shows a number of menu based on available space (height and width) with an overflow. Try to replace the following class in this way (be sure that all the rules will be applied, add !important if necessary). Maybe is not what you desire but could be a starting point.
.site-nav--has-grandchildren {
display: flex;
flex-wrap: wrap;
align-items: end;
position: fixed;
max-width: 90%;
max-height: 80%;
overflow: auto;
min-width: unset;
}
Related
I'm very new to website designing and have learned a bit of HTML and CSS.
I was following this website designing tutorial and halfway through it came across this tutorial on creating a CSS RESPONSIVE CARD HOVER EFFECT for the second section of my webpage.
https://www.youtube.com/watch?v=8b2mTq0Xrtw&ab_channel=OnlineTutorials
The problem I faced here is getting my images aligned at the body, and container tags because I already have them in my style sheet and when I make the changes he recommended, it messes up the alignment of my entire web design.
Are there alternatives tags I could use to work around this? I have tried using div class and setting a different name but it just doesn't work!
I know it's a fairly easy fix, but I've tried many things, even creating a second style sheet but it still doesn't seem to work!
You don't need the body styling that he put on the tutorial, it is just there
to center content on the screen so we can see it better.
If you have a .container class already in your code, you can always change the
name of the class to card-container or new-container or
whatever you think is suitable.
.card-container {
position: relative;
width: 1100px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 30px;
}
.card-container .card {
/*
Styling for card
*/
}
Consider the following:
Consider this to be a full, 1920px screen. The div wrapping the texts and buttons seen in A is a flexbox.
When I resize the screen, the text and buttons squeeze as much as possible - as seen in B.
Eventually, when there's no more space to squeeze, it collapses into C.
Now, I've added a breakpoint so that C comes to effect at 1024px, meaning that the texts and buttons will have some padding between them so to never get glued together. For this, I added a padding: 0 50px;.
I was wondering if this - adding the padding - is the best, most efficient way of implementing this collapse given that I'm working with flexboxes.
Should this be done in a different, more appropriate way?
class {
display: flex;
flex-direction: row;
word-wrap: normal;
text-align: center;
justify-content: space-between;
height: 100%;
}
#include breakpoint-max(1068px) {
padding: 0 50px;
}
}
Thank you!
Try to add flex-wrap:wrap;. By default it is no-wrap. That's why elements squeezing. You can read more here https://css-tricks.com/snippets/css/a-guide-to-flexbox/
In my previous question I asked a similar question but was using the bootstrap framework. I want to be able to create a responsive page without using bootstrap because I don't really like the grid system.
I have two divs that are centered horizontally and vertically. I would like for it to be responsive and stack up on top of each other when the window is minimized. My code on CodePen. I've attempted it a few times and I still not sure how to approach it:
#media only screen and (max-width: 768px){
#about #aboutInfo{
border: solid;
float:none;
text-align: center;
width: 100%;
}
#about #aboutInfo{
float: none;
width: 100%;
}
}
I've already solved your problem in the previous post but ok. First of all, I advise you to stop using floats because floats are history and float: none; does nothing because by default elements don't float like you have it written in your codepen. Second, I recommend you to take a closer look at Flexbox and the possibilities it brings because it really shines when it comes to responsive web design/development.
So again, solve the problem by adding the below code to your media queries:
#about {
flex-direction: column;
}
And also like I told you before it's always good to use some basic CSS browser reset:
* {margin: 0; padding: 0; box-sizing: border-box}
If I understand you right, you should add
flex-flow: row wrap;
or
flex-wrap: wrap;
in #about.
The reason it's not stacking is because you're separating your content with div tags. Make the section a col and style them like here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
In bootstrap, there is a row tag that acts like a div tag. But each of the columns are litterally "col-**" with styling behind them.
This is my first question and I'm having real difficulties sorting this problem. Basically I have created a gallery using ul and li to make it responsive. The gallery can be found here:
http://www.radiologycafe.com/radiology-trainees/normal-variants
The issue I'm having is that if the text underneath the image is too long, it pushes the image directly below to the right of the page.
How can I keep the images in a line whilst keeping the page responsive and avoiding the use of white-space:nowrap which causes the text to overlap with other text?!
Can anyone help me!?
Screenshot of the problem. I have drawn on (using amazing photoshop skills) how I want it to look
Solution 1 (hide excess content to keep equal heights)
You can avoid this behavior by not allowing your <h5>s in your <li>s to wrap, using the CSS below. I also applied this rule to the descriptions (<p>s), in case you might add elements with longer descriptions in the future:
.nvgallery li h5, .nvgallery li p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2;
}
jsFiddle
(Note: I didn't add all the CSS from your website, only the relevant parts for this issue).
If you want to display inline-block elements as grid, the condition is that all elements are equal in height. If one element is higher than the following ones, it will create a small floating point (a corner) where the browser will start a new (shorter) row.
Solution 2 (allow unequal heights)
Flexbox.
.nvgallery ul.row {
display:-webkit-box;
display:-webkit-flex;
display:-moz-box;
display:-ms-flexbox;
display:flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
jsFiddle
Now you can have li's of unequal heights and they will all play nicely.
This is happening because your list items have variable height. A quick fix would be to set a height of about 210px on each which should cover the added height from wrapped text:
.nvgallery ul li {
height: 210px;
}
Test and adjust as needed.
The other fix, which is evidently necessary at first glance, is that your floats aren't clearing properly so that in some viewports the H3 tags end up appearing as though in-line with your images (which are floating to the left of the headlines).
If you set a rule to clear:both on H3, this problem is cleared up as well:
h3 {
clear: left;
}
You will likely want to edit your code so that it does not include { float: left; } on the li elements. Instead, try setting the li elements as inline blocks with { display: inline-block; }. You'll need to adjust the alignment of the li items a bit, but this should solve your issue.
An answer with JSFiddle sample code is available at: https://stackoverflow.com/a/11812316/5953701
I'm more of a designer than a coder, so apologies if this question seems bone-headed and the answer obvious.
Anyway, with that caveat out of the way... I'm trying to create a page where the images are in a row that extend off the right edge of the screen, so that the user can scroll to see more images. Other interface elements like the logo and nav are fixed in place.
You can see the page here: http://werewolf.phantomlimb.net/
and the CSS here: http://werewolf.phantomlimb.net/wolf.css
To remove the spaces between the images I have floated them left.
My question is that in order to prevent the images from wrapping, even with a height attribute on the container div and display: block I have to give the div a width value, in this case 4000px. A width of auto for example makes the images wrap onto a new line, which is what I don't want!
As I may not always know the exact width of the combined images, is there a width value I can use that will force the images to stay in a single row, or some other CSS trick?
Many thanks.
J
I would use inline-block for this kind of stuff.
Something like this:
#imgHolder{
font-size: 0px; /* Remove the spaces between the images */
white-space: nowrap; /* Prevent the images from wrapping */
}
#imgHolder img{
display: inline-block;
vertical-align: top;
height: 654px;
width: auto;
}
Here's a working example:
http://jsfiddle.net/155ukfwp/