I have a doubt about why when I apply width in my CSS code (for example 82%) to the container (div class="card__texts" in my code) of h2, p and div does not apply, but if I apply individually width to its children of that container applies the width.
Edited: now the card keeps its size in resolutions higher than 1366px and set the width of 50% in both containers (container of the text area and the container of the image) in the desktop version. Thanks for the comments and help.
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.
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.
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.
