Element will not be responsive – HTML & CSS – SitePoint Forums

Hi can i ask for help please,

I’ve been working on this responsive for 3 days but it didn’t work

I want when the browser resizes, the div is also 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

Thanks in advance


Because your div has a fixed width, it won’t 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;
}



1 like

so I’m going to remove these widths? but i need to have starting width:1024px by default, or only

.main-design .plans

I will remove the width

hello jemz

I think you want something like this. I made some changes to the code. looked.

  /* ######################################################## 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 */

You’re using the width property for each element, that’s why you’re having the responsive issue. What I would suggest is to use 100% width for the main containers instead of a fixed width.



1 like

Another problem when these 3 divs line up when resizing, the div.social-proof is missing, it doesn’t show

Digging deeper, you have a number of things that can cause you problems.

  1. There are widths on everything.
  2. You use absolute position on your main groups, which almost guarantees that it won’t be reactive.
  3. You have heights AND widths on most things, which usually isn’t necessary, especially if you want it to be responsive.
  4. Heights/widths are fixed px instead of viewport or percentages.
  5. You use classes and ids interchangeably (frame-44, -45 and -46 for example). If something is common, please use a common class – this will avoid frustration later)

I took a quick pass to eliminate most of the widths (and a number of heights) and tweaked some of the bending settings, and it’s pretty responsive. The font size isn’t, but that’s another step in the process.



3 likes

Dave has answered most of your issues and I’ll just make a few suggestions.

First of all, why did you give different classes to several elements and repeat the same styles over and over again? Just use a class for common styles and a new class if there is something special for that element only.

For example, you have -1, 2, and 3 bids, but they are all basically the same. Why not just call them sale offers and have a set of styles for them. Also avoid qualifying them with long strings of selectors as this makes specificity awkward and not needed most of the time.

Also avoid things like this:

lorem

It’s no better than the old font tags and ties your css to the markup in a way that would be hard to undo later. Not to mention that you applied this rule to multiple scopes when you could have applied it to all by default and then just styled the differences.

Using class names that specify the font name and other specific styles is against css methodology and you should have class names that reflect the purpose of the elements and not their appearance. This way you can change the font name and colors of 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 maximum width if you don’t want the page to be 100% wide. Also use minimum height instead of height when you have things like flowing text contained inside or use no height because content will dictate height and flex box can equalize heights automatically.

Dave did a good rewrite above, but I would suggest using auto margins to align the See More buttons down and inline with each other. The code to add 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 detailed the code must be due to the methods you employed when it could have been done with a simple class.



4 likes

Source link

About Irene S. Stroupe

Check Also

Does anyone know RedbeanPHP? – PHP – SitePoint Forums

I’m using RedbeanPHP ORM to design a personal text-based web game. So what I’m trying …