I created a product description using Bootstrap. I am trying to align the text with the image, but floating left didn't have the desired effect. The image is too large, so I want it to be vertically aligned. Here is a link to a pen where you can see my code:
`https://codepen.io/anon/pen/WpVydZ`To achieve the desired layout, it is recommended to enclose the ul and img within a wrapper div and apply display: inline-block + vertical-align: middle to each element.
Additionally, place the image before the ul.
For a visual example related to "Wickelkommode", please refer to:
Give this a shot:
<div class="col-lg-6 sm-12">
<div class="row">
<div class="img-bed col-sm-6">
<img alt="" src="https://www.mixibaby.de/item/images/1003028/300x300/1003028-felix-grau-bett.jpg" style="width: 300px; height: 300px;">
</div>
<div class="bed-div col-sm-6">
<h3>Bed</h3>
<ul class="bed">
<li>3-level adjustable bed base (from 21cm to 36cm and 52cm)</li>
<li>Sleeping area: 70cm x 140cm)</li>
<li>Total dimensions L/W/H: approx. 145cm x 77cm x 85cm</li>
<li>Clearance: approx. 8.5cm</li>
</ul>
</div>
</div>
</div>
You will be creating two divs within the same row, with one containing the image and the other containing the unordered list.
For the CSS styling:
.row {
display:flex;
}
.img-bed, .bed-div {
flex: 1;
}
ul.bed {
position: absolute;
top: 25%;
bottom: 25%;
display: block;
height: 50%;
}
The 'display:flex;' property allows you to adjust the height of both child divs equally. The 'flex:1' ensures that both divs share the maximum height available. Additionally, the positioning and height styling for the ul element centers it within the parent div.
I have a vision to develop a mailing system utilizing Django. The main concept involves having a URL page, email.html, where Django will deploy the URL upon entering the correct one. The structure of this page consists of a simple textarea and a submit bu ...
When attempting to create a dynamic dropdown menu, I encountered an issue where the values were skewed in Internet Explorer if they exceeded the width of the dropdown. To fix this problem, I added select:hover{width:auto;position:absolute}. However, now th ...
Currently, I am troubleshooting the JSFiddle where my goal is to vertically center text using CSS. Below is the HTML code that I utilized to create the JSFiddle: <div class="poster text-center pt-4"> <div class="item"> <img class=" ...
I am currently working on setting up a select button that will receive options from an ajax call. The ajax call is functioning properly. However, I am facing a challenge when trying to create a variable containing the HTML. I am unsure of how to iterate a ...
I'm stumped on this one... Maybe there's something simple I'm overlooking, but I'm hoping for some help from you guys. When viewed on mobile devices, the entire HTML element takes up around 80% of the screen width. Oddly enough, resiz ...
I am working on triggering intersectObjects when a mesh is behind another mesh (to determine if the mesh is visible to the camera). Currently, I have found that intersectObjects is triggered when a mesh is both behind and in front of another mesh. Here i ...
#MyTable tr+tr:hover { background: #dfdfdf; } <table id="myTable"> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>1</td> <td>2</td> &l ...
Summary of My Issue: This involves PHP, JS, Smarty, and HTML <form name="todaydeal" method="post"> <span id="fix_addonval"></span> <input type="radio" name="offer" id="offer_{$smarty.section.mem.index+1}" value="{$display_offe ...
I've been struggling to automatically update the data in model personalDetail.add value when adding two column data. The added data appears correctly in the input box, but it's not updating in personalDetail.add. What am I missing here? Help need ...
My one-page website has a fixed navbar that I want to change its active status when scrolling down to specific div positions. Even though I tried using jQuery, the code doesn't seem to work as intended. Here is the snippet: // SMOOTH SCROLLING PAGES ...
Struggling with my portfolio website, I encountered a challenge. I attempted to place two divs side by side, each containing text and an image. While the initial setup was simple, trying to make it responsive using flexbox has proven to be quite frustratin ...
Although this issue has been discussed before and was previously considered a bug, I am currently using jQuery v1.11.0, which should have resolved it. The problem I am encountering is that when my page loads, there is supposed to be a slide-in effect (as a ...
I recently implemented a bootstrap navbar on my website, and to easily update the content within it, I placed it in a separate file called nav01.php. However, I encountered an issue when trying to mark the active page in the navbar once I loaded it into ot ...
I am facing a common issue with two side-by-side divs, which I usually solve without any problems by floating both divs left and adding a clear:both div after them. However, my requirements have made this problem more complicated to solve... What I would ...
I'm having trouble aligning labels and inputs in my contact form. They need to be aligned to the right due to the Hebrew language. Here is a link to the fiddle of my code which is not working, you can see that the input boxes are not aligned. I need t ...
Within this particular table, it is not only cell B that contains both a heading and content, but cells A and C as well. My effort to establish the heading and content using DIV elements has been somewhat successful. While I have achieved the desired font ...
After thoroughly reviewing the documentation on Imagemapster's website and browsing several posts, I am still struggling to get the tooltips working correctly. I attempted to share my HTML and JS code on jsfiddle.com without success, so I have provide ...
Is there a way to make an image clickable within an HTML email, even if the image is set as a background-image URL? I would typically wrap the DIV in an "a href", but I am uncertain if this method is supported by email clients. The image is set as a back ...
My header.php works perfectly on desktop, but the navigation bar is not displaying properly on mobile devices. Here is my code: <!DOCTYPE html> <html> <head> <title>International Pvt. Ltd.</title> <meta name="viewpo ...
I am attempting to create an iPad app using jQuery and jQTouch for the second time. I want to split the existing jQTouch theme designed for iPhone, which uses one window, into two separate windows optimized for the iPad. My goal is to have navigation on t ...