Eduardo DdC• 20
@ryu-ed
Submitted
I just want to know what I can improve on.
Akash Verma
@akash-1712
All comments
- Akash Verma• 810
@akash-1712
Posted
it help to improve your design
.principal { display: flex;
/* max-width: 768px; */ remove /* max-height: 420px; */ remove width: 73%; margin: auto;}
- { box-sizing: inherit; }
.columna.activa { /* width: 60%; */ remove }
0 - Vijayarajan S• 195
@vijayarajan2244
Submitted
Overlap Image color task is pending, If you interest complete that. Tell your feedback.
Akash Verma• 810@akash-1712
Posted
In (div.pic) give background-color:purple and In image set property=>{opacity:0.3,width:100%,height:100%}.
Marked as helpful
0 - Eder Carrillo• 130
@EderCB
Submitted
Hi! This is my solution, hope you like it! Any comment for improvement is welcome!
Akash Verma• 810@akash-1712
Posted
In header change height:100vh to min-height:100vh
0 - Azubuike Njoku• 65
@DrZubby
Submitted
Why is it hard to make background images responsive?
I need recommendations and resources on better ways to style background images to be responsive and responsive web development ideas or resources.
Akash Verma• 810@akash-1712
Posted
make a (div.image) give background-color:purple and then put image inside it with property=>{opacity:0.3}.
For mobile Layout give order:1 to div.image and set flex-direction:column for main.
1 - dstriz09• 95
@dstriz09
Submitted
Was struggling A LOT with the image and finding a solution that was easily translatable with the media query
Akash Verma• 810@akash-1712
Posted
Make a (div.image) give background-color:purple and then put image inside it with property=>{opacity:0.3} and set min-height:xrem.
Marked as helpful
1 - anwer• 30
@anwer25
Submitted
Incomplete project there are some problems with picture(background color for image ...) I need help
Akash Verma• 810@akash-1712
Posted
To turn the image purple make a (div.image) give background-color:purple and then put image inside it with property=>{opacity:0.3}.
In div.model-wrraper set {flex-direction:column} and In picture.model-image set {order:1} for mobile-layout
Marked as helpful
0 - Ronny9299• 10
@Ronny9299
Submitted
no logre cambiar el color de la imagen y el responsive puede mejorarse mucho
Akash Verma• 810@akash-1712
Posted
To turn the image purple make a (div.image) give background-color:purple and then put image inside it with property=>{opacity:0.3}.
0 - Hashirzz• 10
@Hashirzz
Submitted
I will be glad to know some issues in my work and some good suggestion as am a newbie
Akash Verma• 810@akash-1712
Posted
In div.card set {background-size:cover}. In div.overlay set {width:initial} for destop layout.
0 - Javi Rodriguez• 10
@JaviRdrgz
Submitted
Hi! feedback would be highly appreciated. Especially about the image. I tried using an img tag but could't make it behave like a background img with css. In particular, the image wouldn't grow with the container and there would be a gap at the bottom. Thank you!
Akash Verma• 810@akash-1712
Posted
Give min-height:20rem to picture and add some Margin-top:10rem in article for mobile Layout.
To turn the image purple make a (div.image) give background-color:purple and then put image inside it with property=>{opacity:0.3}.
Marked as helpful
0 - Calvin.A.S• 120
@calvin17
Submitted
Hi!!! ✨🎉, I have completed this challenge, I would appreciate any comment about my solution.
Thanks.😊😊
Akash Verma• 810@akash-1712
Posted
Add transition and box-shadow on button:active.
0 - Calvin.A.S• 120
@calvin17
Submitted
Hi!!! ✨🎉, I have completed this challenge, I would appreciate any comment about my solution.
Thanks.😊😊
Akash Verma• 810@akash-1712
Posted
Add transition and box-shadow on button:active.
0 - Calvin.A.S• 120
@calvin17
Submitted
Hi!!! ✨🎉, I have completed this challenge, I would appreciate any comment about my solution.
Thanks.😊😊
Akash Verma• 810@akash-1712
Posted
Add transition and box-shadow on button:active.
0 - Malesela Kgobe• 555
@M-Kgobe
Submitted
Hi guys, completed my first challenge. Would definitely like to hear some feedback if any.
Akash Verma• 810@akash-1712
Posted
decrease font-size and In div.details set justify-content: space-between.
Marked as helpful
1 - Tuangpi• 165
@Tuangpi
Submitted
I would like to hear any feedback or improvements on my code.
Akash Verma• 810@akash-1712
Posted
In div.main set width:90% for mobile layout.
Marked as helpful
0 - Jay Darhk• 20
@Jay-Darhk
Submitted
The code is unfortunately a bit of a mess, sorry about that, I'm sure this can be done much more gracefully. But I'm still far from proficient with CSS grid, and it took me a bit of trial and error to figure this out. Also, the purple hue on the image isn't quite right. I used the :after element to make an overlay with semi-transparent purple background, but it doesn't quite look like the design. Any tips on that?
Thanks, any feedback is appreciated!
Akash Verma• 810@akash-1712
Posted
In div.content_image give background-color:purple and In image give opacity:0.4.
Marked as helpful
1 - TheLegend27• 50
@Andi995
Submitted
Improvements on the code?
Akash Verma• 810@akash-1712
Posted
In div.card set {height:100%,margin-top:2.5rem} and In div.info set {height:auto} for mobile layout.
1 - Lakshan• 305
@M-lakshan
Submitted
My NEWBIE-Free7th build-up. Can we use flex properties for HTML { } instead of body {}, inside a CSS sheet? I know it's possible but is it okay to do so?
Akash Verma• 810@akash-1712
Posted
Give some margin-top to main for mobile layout.
Marked as helpful
0 - Jean Pierre Jeri• 30
@jeanpierre-jeri
Submitted
If someone has a suggestion on how to fix desktop part, i just can't figure it out, thanks
Akash Verma• 810@akash-1712
Posted
In destop layout, In main.container set {align-items:initial,min-width:80%} and In div.img-container remove display:grid property.
In mobile layout ,give margin-top:10rem in main.container.
0 - Junaid• 20
@jabbasi09
Submitted
I need some help with image masking, and also how do I make the image responsive?
Akash Verma• 810@akash-1712
Posted
Never use postion:absolute to design the whole layout. To make similar design you may use: 1)body{ height:100vh,display:flex,align-items:center,justify-content:center, min-height/min-width:500px/according to your design} it automatically place the div.main-container in center of screen. 2)For Mobile layout just give {height:initial} in body and add margin-top:10px to div.main-container. it helps to make your design more responsive. 3)main-container have two child Ex=>div.card and div.image and set property of main-container{ display:flex,flex-direction:row}.
Use flex-direction:row in div.main-container and use order:1 and 2 for div.card and div.Image respectively to align side by side for Destop layout.
Use flex-direction:column in div.container and use order:2 and 2 for div.card and div.Image respectively to align up and down for mobile layout.
For image=>In div.image set property{flex:1,width:100%,height:100%,color:violet} and place img inside it with following property=>{width:100% ,height:100%,opacity:0.3}
Marked as helpful
1 - Syahrizal Ardana• 290
@Gombeng
Submitted
i've a struggle when to add a bg for card and bg for body
for card: i use backround: url('/images/blabla.png') and this work at my computer until i push it to github it doesnt work.
i use the same with body bg but it doesn't work neither.
please help me :)
Akash Verma• 810@akash-1712
Posted
Add your scss file in a folder and the set background:url() according to new position of scss file.May it solve problem.
0 - Mark Barton• 15
@markbarton66
Submitted
Hi, I've just finished my very first challenge and would appreciate some feedback on the codebase. Any advice on how to optimise my work would be great. Thanks and have a good day! :-)
Akash Verma• 810@akash-1712
Posted
In Mobile Layout decrease font-size,otherwise Looks Amazing👌
Marked as helpful
0 - Aleksandra Ryan• 130
@AleksandraRyan
Submitted
It is my first project on frontendmentor.io site and I would appreciate any feedback on my first project!
Akash Verma• 810@akash-1712
Posted
In mobile layout set width:initial for div.flex it allow to center the container horizontal.
Marked as helpful
0 - Carl Wicker• 1,055
@carlwicker
Submitted
This was another fun project. Any feedback is welcome.
Akash Verma• 810@akash-1712
Posted
In body add property=>min-height:50rem/according to your design, unit in rem or px not use vh.
0 - MJ• 30
@MJ1001
Submitted
Is there a better way to add a tint on the image, as compared to filter?
Akash Verma• 810@akash-1712
Posted
I have a suggestion for you to align container to center of screen: 1)body{ height:100vh,display:flex,align-items:center,justify-content:center,min-height:500px/according to your design} it automatically place the div.container in center of screen. 2)For Mobile layout just give {height:initial} in body and add margin-top:10px to div.container. it helps to make your design more responsive.
Marked as helpful
0
