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.
Related
Guys I cannot for the life of me figure out how to vertically align the images in this section.
See the Divi builder screen shot here
I've aligned them with an aspect ratio that would make them the same height but unfortunately the 20px padding in between the right images is making them protrude.
This is happening on all of my sections!
The uneven images
Please help!! I cant find a solution that works anywhere! :/
Website URL: www.tessa-jane.com
Use align-items: flex-end; on flexbox.
#media (min-width: 981px)
.et_pb_row.et_pb_equal_columns, .et_pb_row_inner.et_pb_equal_columns, .et_pb_section.et_pb_equal_columns>.et_pb_row {
display: -ms-flexbox;
display: flex;
direction: ltr;
align-items: flex-end;
}
But keep in mind the main issue is the height of the image needs to be increased. When you align the bottom (the problem in the picture) the top becomes offset. I would suggest increasing the height of the image also. But this at least fixes the bottom portion.
I just review your website you have to add height: 100% in few elements. There are 2 options to resolve your issue.
Option 1: Add Height 100% Class or Inline CSS in below mentioned elements.
Option: 2 Add below CSS in style.css file.
.et_pb_image {
height: 100%;
}
.et_pb_image_wrap {
height: 100%;
}
.et_pb_image_wrap img {
height: 100%;
}
I hope it'll resolve your issue, Thank You
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/
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.
I've been working on a website and have been struggling with CSS (I had originally accomplished my goal with JavaScript, but I was having many cross-browser-compatibility issues).
I have 4 uls in a footer which I want to align based upon the screen size.
I set their width properly based on the screen size:
#media screen and (min-width: 1281px){/*lg*/
/*sm*/
.cmc-grid-sm-1 {
width: 8.33333%;
}
. . .
Yet it appears to be the wrapping of the elements within the parent container which I am having a problem with.
What I would like them to look like is this:
And instead, they end up looking like this:
I've highlighted the borders of the elements with red to show how they are aligning
What can I add to my CSS to make these DIVs align they way I would like them to (I've been looking everywhere for my answer!)?
Here is my JSFiddle!
Now i know this is a little bit of a dirty hack and it wont cover every possibility but give this a try out:
#media screen and (min-width: 482px) and (max-width: 1024px){
...
.cmc-column:nth-child(3n+3) {
clear:left;
}
...
}
It works in your current situation but dont hold me to it when it comes to adding more columns etc.
JSFiddle
It works as the 3rd div then expects to have nothing to its left pushing it to the left and putting it below the other 2 divs.
Just use the display: table; for the container and the display: table-cell; or the display: table-row; for your inner divs:
.container {
display: table;
}
.column {
display: table-cell;
}
Take a look at the example here and apply it to your code.