Skip to content
OverviewSolutions
9
Comments
1

gowthamss

@gowthamssIndia185 points

I am a UI developer with a year of experience. I love front-end development.

I’m currently learning...

React, Cloud Computing, Styled Components.

Latest solutions

View more solutions

Latest comments

  • gowthamss•185
    @gowthamss

    Hi, I have gone through your solution. I noticed that your '.card_texts' and '.card_picture' are the two children inside the '.card'. If you set width to child elements by percentage, they will always be aligned with respect to their parent container.

    1. In mobile and tablet resolutions, if you see image and the content('.card_texts') are stacked on each other. So, they are occupying the full width of the '.card' container(parent). In this case you set whatever width you want to set to your '.card_texts' div and it will be aligned according to it.

    2. But in the case of desktop, your '.card_picture' is taking a width of 540px(inspect and see) in all the resolutions after 1019px. So, now your '.card_texts' is left with the width that is '.card' container width - '.card_picture' width. So, it can only grow and shrink in that particular width only. Note: Try applying the width to '.card_texts'(you can apply from say 10% and increase to see where it stops getting applied) in the dev tools of chrome.

    As I noticed, in 1366px resolution, the '.card_texts' can grow up to 50%. And this percentage will be reduced as you reduce the screen resolution. Ex: in 1020px resolution, it takes up to 40%.

    Probable Solution: 1.In order to avoid this behavior and have both the '.card_texts' and '.card_picture' have equal size in all the desktop resolutions, try applying width: 50% to both the containers. So they take the equal size in all desktop resolutions. 2. Or you can apply CSS grid to your '.card' container having two columns taking '1fr 1fr'. By applying this they will always be divided into two parts of the container and take the equal size.

    Let me know what you think and if my explanation is difficult to understand, please add a comment. I'll try to explain again.