Submitted about 2 years ago

basic flex and mainpulation css hide and show

udinjelek•10

@udinjelek

Preview site View code

This is a solution for...Base Apparel coming soon page

HTML
CSS
JS

1newbie

Design comparison

SolutionDesign

Solution retrospective

I still don't know the best practice convert from web to mobile, especially breakdown div from this case

in web view

<div class='containerFlex'>
	<div class='containerA leftSide'>
		<div class='title'></div>
		<div class='article'></div>
	</div>

	<div class='containerB rightSide'>
		<div class='photo'></div>
	</div>
</div>

in mobile view

<div class='container viewFromTopToDown'>	
		<div class='title'></div>
		<div class='photo'></div>                       /*see photo are in mid!!! */
		<div class='article'></div>
</div>

/* ------------------------------------- */ so my solution are:

<div class='containerFlex'>
	<div class='containerA'>
		<div class='title'></div>
		<div class='photo mobileMode'></div>
		<div class='article'></div>
	</div>

	<div class='containerB'>
		<div class='photo webMode'></div>
	</div>
</div>

/* ------------------------------------- */ so the css are:

.mobileMode{
	display:none;
}
.webeMode{
	display:block;
}

@media {
	.webMode{
	display:none;
	}
	.mobileeMode{
		display:block;
	}	
}

/* ------------------------------------- */ but again, I don't think thats the right answer since I'm newbie and none of my friend are web programer

Community feedback

Phúc (Scott) Nguyễn•430
@NationsAnarchyPosted about 2 years ago
Hey there Udin, good job showing your solution here on the website!

If you want to have a different layout for a smaller width, you can use the CSS media query properties: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Please have a look at that article, it should give you the idea on how to align/size elements properly with different screen widths. Do let us know what else we can help you with as well, and happy coding!
0
udinjelek•10
@udinjelekPosted about 2 years ago
@NationsAnarchy well i have read CSS media query and have implement it. maybe you not catch the problem I have, but its OK.

since maybe it happened due to my poor explanation. or the detail explanation I made, make you confuse

in web view: title and article in container A, the "photo" in container B,

in mobile view: the photo are in "between", title and article

I have solved the problem so the mobile view have correct output. but like I have state in the question, "I did that" but i don't know how proper answer people to solve it.

thanks for your time for the reply
0
Phúc (Scott) Nguyễn•430
@NationsAnarchyPosted about 2 years ago
@udinjelek Oh I see, you have issues aligning the image down when the mobile screen width reaches - then I can suggest you use the Grid system, it should be able to help you align elements differently.

Feel free to look at my solution to this challenge: https://www.frontendmentor.io/solutions/base-apparel-coming-soon-solution-CQbT4vk-Bv
0

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord