@Mismisty
Latest solutions
REACT -> Desktop Only Interactive Card (Flexbox + vw/vh dimensions)
#reactSubmitted over 1 year ago
Latest 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.
