I have a bunch of .col-xs-3 and .col-xs-9 columns that should fit perfectly inline. They do on the desktop, even with media queries as narrow as 300px and below, but when I view the page on an actual mobile device (including the latest iPhone models), the columns wrap.
You can see my page here: https://affordable-healthcare-plans.org/p/signup-4.php
How it looks on desktops at small media queries (correct)
How it actually looks on mobile (incorrect)
What I've tried so far
I've started on a workaround where I disable flex-wrap: wrap on the rows but that really shouldn't be necessary since the bootstrap sizes should be an exact match.
EDIT
I could link to the source but my issue is mainly that I'm using bootstrap with some custom CSS and I don't know where the issue is coming from. Looks fine for me on older models.
Some of my snippets:
.form-contain .col-md-6 .row {
display: flex;
flex-wrap: wrap;
width: 100%;
align-items: center;
}
.row > label {
text-align: right;
white-space: nowrap;
position: relative;
left: -15px;
display: flex;
justify-content: flex-end;
}
Adding white-space: nowrap doesn't bring the labels and fields inline either and that almost always works.
Issue resolved! Bootstrap was placing a 0x0 px display: table pseudo-element via ::before inside each row, and somehow although it should have no size, it was causing the columns to wrap. Forced that pseudo to display: none within my form and now everything displays properly.
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 am using bootstrap for creating webpage.
I have derived body on two blocks(content and header). Inside the content block i have div with class .container .sameTable and inside it i have div with class .row .sameRow that derived on two other blocks(left and right). left has class - .col-xs-2, right has class - .col-xs-10 and both of them have class - .sameCol too.
In Opera, FF, IE i have no any problems. But in Chrome on different screen sizes, contents width has less then other blocks on ~1px. I read that i may be caused by percentage width defining, but i cant change bootstrap's classes. How can I avoid it?
image - http://c2n.me/3em6LU4.jpg
Additionally, if i removed float:none from left and right blocks, issue is wanised, but my left block became smaller then i need.
image - http://clip2net.com/clip/m421320/49445-clip-46kb.jpg
.sameTable, .sameRow, .sameCol it's my own classes that looks like:
.sameTable {
display: table;
padding: 0;
}
.sameRow {
display: table-row;
}
.sameCol {
float: none;
display: table-cell;
vertical-align: top;
}
It's a rounding problem with the Bootstrap grid. Since Chrome supports sub-pixel rendering, it will exhibit the bug. I wouldn't worry about it.