- This topic has 1 reply, 2 voices, and was last updated 7 years, 9 months ago by
.
-
Posts
-
I’d like to align my content vertically to the largest item within a column containing two or more columns.
Here is an example of code that uses a content section with a row containing two columns. The first image is height is larger than the second so to look right I’d like to have the second image float to the vertical middle of the first item.
[intense_content_section background_type="color" background_color="#ffffff"] [intense_row padding_top="15px" padding_bottom="15px"] [intense_column size="6" medium_size="6" small_size="12" extra_small_size="12"]<a href="https://www.siteground.com"><img class="aligncenter" src="https://ua.siteground.com/img/banners/general/dynamic-price/125x125.jpg" alt="Web Hosting" width="125" height="125" border="0" /></a>[/intense_column] [intense_column size="6" medium_size="6" small_size="12" extra_small_size="12"]<a href="http://test.com"><img class="aligncenter size-full wp-image-1026" src="http://newsite.pineapple-pc.com/wp-content/uploads/2015/04/Pineapple-PC-Recomends-Carbonite.jpg" alt="" width="500" height="59" /></a>[/intense_column] [/intense_row] [/intense_content_section] [intense_content_section background_type="color" background_color="#ffffff"] [intense_row] [intense_column size="12" medium_size="12" small_size="12" extra_small_size="12"]<p style="text-align: center;">Copyright [footer_copyright] Pineapple PC</p>[/intense_column] [/intense_row] [/intense_content_section]Hello!
There isn’t a perfect solution for what you are trying to accomplish. One thing you can try is adding an [intense_spacer] shortcode before the image in the second column. You would want to make the spacer big enough to make it appear in the middle.
However, you will have some issues when on the different screen sizes. You may need to add an [intense_responsive_utility] shortcode around the spacer to only show it on the appropriate device.
You must be logged in to reply to this topic.