How to Create a two-column layout. In responsive view image should be on top and paragraph should be under the image and in Desktop view vice versa?
Posted By: Riya Saini Published: 14, Jan 2024
Table of Contents
Ques - Create a two-column layout. One column contains the paragraph and the other contains an image. In responsive view >=320px (image should be on top and paragraph should be under the image) and >=992px (Paragraph should be in left and Image should be in the right side).
For a two-column layout, you can add the following code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
.column{
flex-basis: 50%;
margin: auto;
}
.row{
display: flex;
width: 90%;
margin: auto;
}
@media screen and (max-width:992px) {
.row {
flex-direction: column-reverse;
}
.column{
flex-basis: 100%;
}
}
img {
width: 95%;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<h2>Training Program</h2>
<p>We conduct training programmes on gender and sexuality with private and government institutions. Discrimination faced by people marginalised because of
their gender identity and sexual orientation from family, school, friends, and workspace is a reality. This along with the intersection of caste, class,
religion, ability, and ethnicity adds to the discrimination and violence faced by them. Through our gender sexuality workshops, we want to enable
participants to understand these marginalisations, discriminations, and intersections and equip participants to see the world from the lens of gender
and sexuality. Additionally, another important component to our work is related to initiating conversations/building capacities of organizations around
burnout prevention, stress management, diversity and inclusion at the workspace.</p>
</div>
<div class="column">
<img src="https://api.commrz.com/image/image_api/catalog/Best%20Practice%20(4).png">
</div>
</div>
</body>
</html>
Output Screenshots:
Desktop View
Mobile View
