@Mismisty
Paras Sharma
@imparassharmaAll comments
- @imparassharma
To be honest your approach of creating divs is not correct....You have to think how will your layout will appear before coding. You should know flex property pretty well so that you can align items easily and in more clean way. You cannot just create divs anywhere and then give them property absolute and then position them using right and left...it is not a good approach.
Like whats the point of naming a section right side and left side but in reality they are acquiring full page widths.... a more defined approach could have been like container width:100vw....then in html leftPage should be created ...and give it width of 50vw lets say,,and then rightPage with width 50vw.......in container flex direction row so that leftPage and rightPage goes next to each other....align-items center ,...justify-content :center....this is how you will have to proceed....with a particular layout in mind....
- @JulienLach@imparassharma
card2 add this property {position: relative; top:1rem} and similarly card3 add {position: relative, top:2rem}
- @Macury@imparassharma
add image give it z-index 0....then create a new div same to the size of the image...and give it z-index 1 ...position it absolute so you can put it on the image div.....give background-color property in the new div which is on top of the image div and reduce its opacity by giving property opacity:0.5 ....it should work
Marked as helpful - @JulienLach@imparassharma
if you want your mobile-menu to not push the other divs when opened then you can give position : absolute to it and change right, left property to position it corectly.
- @Umer-Khokhar@imparassharma
I looked at your code and found out that you have given position relative to the Img in the Right div when media-query is hit at 770px....By looking at that I think there is no need to give position relative to that ...it will work fine without that too
Marked as helpful - @wisny24@imparassharma
You will have to use multiple media queries according to your page. Like your page is getting messy firstly around 1450px So add one media query for 1450px and then so on check where things are getting messy and use media queries. The approach should be such that you will have to use less media queries which can be achieved if you will use proper dimension tools like %, ems, rems, vh/vw etc.
- @mreed4@imparassharma
I didn't understand...are you having problem in publishing the react app in github?
- @Gwen-lego@imparassharma
Hey, everything good and you are going in the right direction. Also in the div content-container you have used px to give it a width and height. My suggestion is that for big divs like these you should use vh/vw as it will increase the responsiveness of your page. Try to use ems, rems for paddings too. Use px for small entities.
- @rsacharias@imparassharma
Everything looks good to me! Maybe I will not be able to help you with your structural query but you are going in the right direction! Keep up the work!
- @marcus-hugo
- @buneeIsSlo@imparassharma
I was looking to your code and saw that you never use height. I mean how ...for the main container I have to define some height because without it then I cannot design my inner components accordingly. So can you tell me should I use vh in my body or main containers? Or how to proceed? https://imparassharma.github.io/Price-Component-Toggle-sections-/
This was the last project I did on frontendmentor but took me a lot time to adjust heights for 1440px dimension. Can you help me!
- @JanBlahout@imparassharma
For making the text static you have to define the height of the container. You have also used justify-content so every time answer shows up the container adjusts its position automatically so don't use that.
Marked as helpful - @gchristofferson@imparassharma
I generally use vh or vw for the main component of the design so it is bit responsive for every dimension. I use px for font-size and small margins and paddings. rem is scalable means browsers will adapt the rem size according to the browser of the system while px are not-scalable. Other user accessing your website cannot force change its size.(If he has some theme or preferred browser font size).
Marked as helpful - @AaronKylePorche@imparassharma
You can add overflow: hidden to the illustration image as per the requirement of the design. Less opacity of hr would have worked. You need to define the height of the main div (white box div) so that on revealing the answer it does not adjust its height automatically, it needs to be fixed. Good going! Keep working!
- @imparassharma@imparassharma
Thank you for taking out time and helping me out. It means a lot to me and yes you are right I know a very little about flexbox actually I took the Angela's webdev course & later found out that there is much more for positioning so I think & also by your suggestion, I should first study about it more. I looked at your codepen example and it was so exciting that I can do that type of layout more efficiently all thanks to you.
- @imparassharma@imparassharma
Generally what I do is I use relative and absolute positioning on my elements and then I try to align them by giving top,left,right,bottom px/% Is there any method in this particular code that I can use for positioning.
