I'm facing some difficulty in ensuring that my text remains responsive alongside the image it's paired with, especially on mobile view.
This is how the module appears in desktop/tablet view:
https://i.sstatic.net/85mik.jpg
And here is its appearance in mobile view:
https://i.sstatic.net/dpnML.png
The issue lies in wanting the image boxes to be center-aligned in mobile view. However, when I align the div containing the images, the text remains on the left side and doesn't adjust responsively.
I am unsure of how to modify my code to make the text responsive alongside the images, but here are the relevant elements' codes:
.cssHotelBox {
position: relative;
}
.pickgradient{
position:relative;
display:inline-block;
}
(remaining CSS styles remain the same)
By setting .cssHotelBox with text-align:center, this is how it appears:
https://i.sstatic.net/izFYf.png
I aim for the text to adapt within the image after the following media query:
@media (max-width: 768px) {
}
Is there a solution to address this text alignment issue? Thank you.