CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive
Asem H
Asem H

Reputation: 93

How do I make the text over an image to be responsive

I am having an issue with making my text responsive with the image its placed with, specifically in mobile view.

Here is how the module looks in desktop/tablet view:

enter image description here

And here is how it looks in mobile view:

enter image description here

The issue here is that I want the image boxes in mobile view to be center aligned. However, when I centre align the div with the images, the text is still placed on the left side, and not being responsive.

I am not entirely sure how to adjust my code to make the text responsive with the images, but here is the code that I have for these respective elements.

.cssHotelBox {
   position: relative;
}

.pickgradient{
   position:relative;
   display:inline-block;
}

.pickgradient:after {
   content:'';
   position:absolute;
   top:0;
   margin-top: 99px;
   left: 1px;
   width:221px; height:50%;
   display:inline-block;
   background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.70) 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.70)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.70) 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.70) 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.70) 100%); /* IE10+ */
   background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.70) 100%); /* W3C */
}

.cssHotelImage {
   height: 160px;
   width: 223px;
   border: solid 1px #FFF;
   margin-top: 40px;
}

.cssHotelText {
   color: #FFF;
   font-size: 14px !Important;
   position: absolute; 
   top: 160px; 
   left: 8px; 
}

.cssHotelCity {
   color: #FFF;
   font-family: inherit;
   font-size: 11px !Important;
   position: absolute;
   top:180px;
   font-weight: 100 !Important;

   display: flex;
   align-items: center;
   align-content: center;
   justify-content: center;
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: auto;   
}

.starRating {
   display:inline-block;
   width:60px;
   height:11px;
   background:transparent url(../images/star-sprites.png) no-repeat scroll;
   margin-left: 6px;
   margin-right: 2px;
}

When I make .cssHotelBox have the text-align: center, this is how it shows up:

enter image description here

I would like the text to be responsive within the image after:

@media (max-width: 768px) {

}

Is there any way I can fix the issue with the text? Thanks.

Upvotes: 0

Views: 78

Answers (1)

Dan Wears Prada
Dan Wears Prada

Reputation: 754

You should wrap the image and the text within the same container

Upvotes: 2

Related Questions