Element will not responsive

[jemz]

Hi, can I ask for some help please,

it’s been 3 days for me to work on this responsive but it didn’t work

I want that when the browser resizes the div also will be responsive and the text

I tried to add

.plans-1{
 ..some css here
  flex-wrap:wrap
}
.frame-44,.frame-45,.frame-46{
  ... some css here
   flex:1
}

here is my codepen

Thank you in advance

[DaveMaxwell]

Because your div has a fixed width, it’s not going to be responsive because the container size never changes.

.main-design {
  align-items: flex-start;
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  min-height: 2117px;
  width: 1024px;
}

.main-design .plans {
  align-items: center;
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  height: 647px;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 188px;
  width: 1024px;
}

[jemz]

so I will remove those width ? but I need to have starting width:1024px by default , or only

.main-design .plans

I will remove the width

[subhasishmishra3]

Hello jemz

I Think You want something like this. I have made some changes to the code. have a look.

  /* ######################################################## CHANGES MADE HERE */
  .main-design .plans {
    align-items: center;
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    height: auto;
    overflow: hidden;
    position: absolute;
    top: 188px;
    width: 1024px;
  }
  
  .main-design .plans-1 {
    align-items: flex-start;
    display: flex;
    height: auto;
    width: 100%;
  }
  @media screen and (max-width:786px) {
    .main-design .plans-1{
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        height: auto;
    }
  }
   /* ######################################################## CHANGES MADE HERE */

[subhasishmishra3]

You are using width property for every element, that’s why you are getting the responsive issue. What I will suggest is use 100% width for main containers instead of fixed width.

[jemz]

Thank you I will try

[jemz]

Another problem when those 3 divs align when resized, the div.social-proof is missing it did not display

[DaveMaxwell]

Digging deeper, you’ve got a number of things which can cause you issues.

1. There are widths on everything.
2. You’re using position absolute on your major groups which almost guarantees it won’t be responsive.
3. You’ve got heights AND widths on most things, which is usually not needed, especially if you want it to be responsive.
4. The heights/widths are fixed px instead of viewport or percentages.
5. You’re using classes and ids interchangeably (frame-44, -45 and -46 for example). If something is common, please use a common class - it’ll save frustration later)

I took a quick pass-through to eliminate most of the widths (and a number of the heights), and tweaked some of the flex settings, and this is pretty responsive. Font size isn’t, but that’s another step in the process.

[PaulOB]

Dave has answered most of your problems and I will just make a few suggestions.

First of all why have you given different classes to multiple elements and repeated the samer styles over and over again.? Just use one class for the common styles and a new class if there is something special for that element only.

For example your have see-deals -1, 2 and 3 but they are all basically the same. Why not just call them see-deals and have one set of styles for them.Also avoid qualifying them with long chains of selectors as that just makes specificity awkward and is not needed most of the time.

Also avoid things like this:

<span class="span1 montserrat-normal-sonic-silver-12-1px">lorem</span>

That is no better than the font tags of old and ties your css to the markup in a way that would be hard to undo later on. Not to mention you have applied that rule to multiple spans when you could have applied it to all by default and then just style the differences.

Using class names that specify the font name and other specific styles goes against the methodology of css and you should have class names that reflect the elements purpose and not its appearance. In that way you can change the font name and the colours from the css without having a conflict between the class name and the style it applies.

Avoid fixed widths and fixed heights as others have already mentioned and use a max-width if you don;t want the page 100% wide. Also use a min-height instead of height when you have items like fluid text contained inside or indeed don;t use any height at all as the content will dictate that height and flexbox can equalize the heights automatically.

Dave has done a good re-write above but I would suggest making use of auto margins to align the see more buttons at the bottom and in a line with each other. The code to be added to Dave’s demo would be this.

.main-design .see-deals-1,
.main-design .see-deals-2,
.main-design  .see-deals-3{
  margin:auto auto 0;
}
.main-design .frame > div:first-child{margin-bottom:31px;
}

Note how verbose the code needs to because of the methods you employed when it could have been done with one simple class.

[jemz]

Thank you Paul

[jemz]

Thank you Dave