Skip to content
OverviewSolutions
18
Comments
54

Suleman

@legion40216Pakistan750 points

Rookie

I’m currently learning...

MERN

Latest solutions

View more solutions

Latest comments

  • Suleman•750
    @legion40216

    Good job on this challange, i would like to point some improvement

    1.remove the width property of 1150px instead let the flex streach and shrink accourding to the size of the view port for better responsiveness on testmoninal-box and add property of flex-wrap to wrap

    2.I liked your implementation of margin: 28em auto in .text-service i was trying myself to find another solution by doing it without using postion: absolute and good use of custom classes

    3.You should add background-position: center in your service section images with background-repeat: no-repeat this will inhance responsiveness

    4.You should reduces the padding of the left and right of text-about classes using calc or min max properties for responsiveness using vw or vh units

    Overall well done loved the detailed thought you put on it

  • Suleman•750
    @legion40216

    Bro good work some suggestions

    First you should start with the layout you can either use grid or flex to accomplish this you need two equal columns and add max-width for responsiveness also remove height

    Avoid using height unless you have to instead use padding of the content to size according to your liking

    .cardContainer {
max-width: 40rem;
border-radius: 20px;
background-color: hsl(0, 0%, 100%);
display: grid;
grid-template-columns: 1fr 1fr;
}

    now we remove widht and height from .RightSide and LeftSide

    .RightSide {
padding: 0 30px;
/* width: 30rem; */
/* height: 100%; */
}

    Happy Coding...

    Marked as helpful
  • Suleman•750
    @legion40216

    Ans General question: study the design then start with the html and emphasizing on semantic html as possible then logic.

    Ans problems: naming classes in css try to avoid naming each and every class instead use custom classes for example

    if you want to style the h1 tag instead of naming the h1 you should simply make class for the color size and weight

    something like this:

    html

    <div>
<h1 className='text-cool-gray fs-250'>
You have the option of monthly or yearly billing.
</h1>
</div>

    css

    .text-cool-gray { color: hsl(231 11% 63%;)}
.fs-250 { font-size: var(--fs-250); }

    this will save you the hassle of not naming each and every tag you want to style learn more about this through cube css and BEM

    Marked as helpful
  • Suleman•750
    @legion40216

    Hi, great work on this challenge. I agree that this challenge was easily intermediate because this project requires good knowledge of flex and grid and position properties to accomplish it.

    I am impressed on your "second section" which doesn't use an height value if you can explain how you did that i struggled with it a lot and had no choice to add height value

    and over all i rate your work an easy 4.5 out of 5

  • Suleman•750
    @legion40216

    Hey, nice work it works perfectly, my suggestion would be to highlight the tip button so that user can visually see which one is currently selected and their isn't any error appearing when one of the input values is empty.

  • Suleman•750
    @legion40216

    Hey, good job on the challenge i experienced some problems in this site.

    • The content is not centered on large screen sizes.

    try and use

    position: absolute;
top: 50%;
right: 50%;
transform: translate(50%,-50%);

    or use grid to center it....

View more comments