Search the Community

Hi, I'm trying to edit the W3.CSS portfolio template. The part I want to edit looks as follows: <!-- First Photo Grid--> <div class="w3-row-padding"> <div class="w3-third w3-container w3-margin-bottom"> <img src="parkhome8.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity"> <div class="w3-container w3-white"> <p><b>Lorem Ipsum</b></p> <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p> </div> </div> <div class="w3-third w3-container w3-margin-bottom"> <img src="parkhome8.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity"> <div class="w3-container w3-white"> <p><b>Lorem Ipsum</b></p> <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p> </div> </div> <div class="w3-third w3-container"> <img src="parkhome8.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity"> <div class="w3-container w3-white"> <p><b>Lorem Ipsum</b></p> <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p> </div> </div> </div> I want to edit it so that instead of just some text I want to achieve something like as below the following: Name: Holiday home Bedrooms: 3 Width: 20 So that 'Name: Bedrooms: Width:' will be static text and the info next to it will be pulled from a database. The problem is getting the info to line up nice and neat and getting it to act responsive when the size of the screen/browser is different/changed. I've tried it with a list but I just cannot work out how to get the static part 'Name: Bedrooms: Width' and then the info part 'Holiday home, 3, 20' to line up nice an neat (like it is above) and get it responsive. If someone could suggest the best way to get this to work I would be very grateful.