I am attempting to showcase three divs in a single line while working on a Subtheme for the Drupal 8 Bootstrap Theme. These particular divs are fields nested within a view known as viewproducts.
The divs include:
- Juicebox Photo Gallery;
- Text: "Title" + "Reference Label:" & "Reference number" + "Description" + "Price Label" & "Price";
- Webform: "First and Last Name" + "Email" + "Phone" + "Message" + "Send Button"
The objective is to create product rows, with each row consisting of the described elements positioned in the following order on the screen:
LEFT: Juicebox Gallery CENTER: Text group of elements RIGHT: Webform
- Gallery: OK;
- Text group: How can I align all elements to center while maintaining the specified order?
- Webform: How do I center all elements while preserving the webform order without accessing HTML directly? I have attempted different styling approaches such as relative position, absolute, and others, but they haven't produced the desired layout.
Below are the class names for the specific elements:
Juicebox gallery: "viewimagefield"
Text Group:
- Article Title: "viewtitlelabel" and "viewtitlefield"
- Article Reference: "viewreflabel" and "viewrefrield"
- Article Description: "viewdescriptionfield"
- Article Price: "viewpricelabel" and "viewpricefield"
Webform class="viewform": - First and Last Name: "prodformname"
- Email: "prodformemail"
- Phone: "prodformphone"
- Message: "prodformmessage"
- Send: "prodformbutton"
.viewproducts ul {
list-style-type:none;
align-content: flex-start;
}
.viewproducts .view-content .views-row{
float: left;
height:50% !important;
margin: ;
}
...
(CSS styles continue)
...
The current output shows the Gallery on the left, the Text centered but misaligned, and some elements placed behind the Gallery. The form appears below both sections with various alignment issues. It seems challenging to achieve a specific order in this layout. Refer to the screenshot for an idea of what's happening: enter image description here
Here is the fiddle link. Please note that the HTML structure should not be altered, as I am constrained to work within the Drupal framework without direct HTML manipulation.