Currently working on creating a 768x240 window design. An example of what I have so far:
<div class="global-tab">
<div class="image" src="link"></div>
<div class="class1">{{details.name}}</div>
<div class="class2">{{details.location}}</div>
</div>
Here is the CSS style being implemented:
.image {
display: inline-block;
width: 29.6875%;
height: 60%;
padding: 5.208% 3.6458% 3.6458% 2.08%;
}
.class1 {
display: inline-block;
font-family: "Arial";
font-size: 20px;
}
.class2 {
display: inline-block;
font-family: "Arial";
font-size: 12px;
}
The image is positioned to the left, while class1 and class2 are on the right side (with text centered in the middle of the image using line-height). Currently facing challenges with applying margins, paddings, and alignment to these texts as desired due to difficulty in composing divs with that order. Any solutions or advice would be greatly appreciated! Thank you!