Position text and button in image block poster.

I am trying to align the title and subtitle to stay on top left corner  of the image block while the button stays at the bottom. Is there anyway I could do it so that the content always stay at the same position no matter the size of the image block? 

You can see that position of the text is slightly different in the screenshot below

This is the code I have so far:

Thank you in advance!

On 3/16/2021 at 2:21 AM, hnrytran said:

I am trying to align the title and subtitle to stay on top left corner  of the image block while the button stays at the bottom. Is there anyway I could do it so that the content always stay at the same position no matter the size of the image block? 

You can see that position of the text is slightly different in the screenshot below

This is the code I have so far:

 

Thank you in advance!

Please send the site url so we can have a look

On 3/16/2021 at 2:21 AM, hnrytran said:

I am trying to align the title and subtitle to stay on top left corner  of the image block while the button stays at the bottom. Is there anyway I could do it so that the content always stay at the same position no matter the size of the image block? 

You can see that position of the text is slightly different in the screenshot below

This is the code I have so far:

 

Thank you in advance!

Can you share link to page where you added poster? We can check easier

@tuanphan Did anyone figure this out? I am trying to do the same with buttons on patrickgarr.com/home (password: pg2021) to center the buttons at the bottom of the images. It sort of worked on the first but still looks off. Is there also a way to bold the button font with css for just these three images? Thanks for any advice!

14 hours ago, pgcreativedesigns said:

@tuanphan Did anyone figure this out? I am trying to do the same with buttons on patrickgarr.com/home (password: pg2021) to center the buttons at the bottom of the images. It sort of worked on the first but still looks off. Is there also a way to bold the button font with css for just these three images? Thanks for any advice!

You mean Explore section?

On 5/1/2021 at 4:01 AM, tuanphan said:

You mean Explore section?

Yes! I think I actually figured it out and got it to position at the bottom of the image!

On 5/9/2021 at 11:16 PM, pgcreativedesigns said:

Yes! I think I actually figured it out and got it to position at the bottom of the image!

I see 2 small problems. Do you need to fix these?

Site URL – https://www.patrickgarr.com/

1. (Mobile/Tablet) 2 icons on bottom right overlap. Want to add a space?

2. (All devices-Blog posts) Comment text is white color. Want to change it to black?

@tuanphan Yes! That would be perfect. I didn’t catch those. Thank you for noticing those. I’d love to fix both. 
 

I also noticed that on patrickgarr.com/coach (under offerings) and patrickgarr.com/masterclasses (under bootcamp), the icons/text are out of order on mobile and stacking incorrectly. Is there a way to also fix that issue? 
 

Thank you for all your help! 

On 5/11/2021 at 11:15 PM, tuanphan said:

I see 2 small problems. Do you need to fix these?

Site URL – https://www.patrickgarr.com/

1. (Mobile/Tablet) 2 icons on bottom right overlap. Want to add a space?

2. (All devices-Blog posts) Comment text is white color. Want to change it to black?

Hey there @tuanphan! I was actually able to fix the blog comment box font issue with some css. All should look good on that. Thank you for alerting me of that issue! 

Do you have any ideas how to fix the mobile issues of text/image order on the other two pages above or the spacing issue you noticed? I'd love to get those fixed asap before launching. Thanks again for your help!

5 minutes ago, pgcreativedesigns said:

Hey there @tuanphan! I was actually able to fix the blog comment box font issue with some css. All should look good on that. Thank you for alerting me of that issue! 

 

Do you have any ideas how to fix the mobile issues of text/image order on the other two pages above or the spacing issue you noticed? I'd love to get those fixed asap before launching. Thanks again for your help!

Hi. Which pages? Can you share link/screenshot?

43 minutes ago, tuanphan said:

Hi. Which pages? Can you share link/screenshot?

Absolutely @tuanphan! It is www.patrickgarr.com/coach under "Offerings" and the images reverse on mobile. The same thing happens on www.patrickgarr.com/masterclasses under "The Bootcamp" where the text reverses on mobile. I'd love to have these in order! I have screenshots below for both.

You want this order on mobile?

1 hour ago, tuanphan said:

You want this order on mobile?

@tuanphan yes! And I’d love for the other page to order properly from #1-4 on mobile as well. Thanks!! 

On 5/14/2021 at 9:36 PM, pgcreativedesigns said:

@tuanphan yes! And I’d love for the other page to order properly from #1-4 on mobile as well. Thanks!! 

Add to Design > Custom CSS

/* Mobile-coaching order */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1620578529243_15151+.row {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
}
}

On 5/16/2021 at 4:47 AM, tuanphan said:

Add to Design > Custom CSS

/* Mobile-coaching order */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1620578529243_15151+.row {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
}
}

 

@tuanphan this worked perfectly for this page!! Is there a way to also reorder the text on the masterclass page on mobile to be in number order? Thanks so much for your help! 

17 hours ago, pgcreativedesigns said:

@tuanphan this worked perfectly for this page!! Is there a way to also reorder the text on the masterclass page on mobile to be in number order? Thanks so much for your help! 

Add to Design > Custom CSS

/* Mobile Masterclasses */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1619809429771_11653+div>.sqpl-tab-content>.sqpl-tab:nth-child(2)>.row:nth-child(5) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
}