Brine banner advice

Hey everyone, 

I've started to pull together a donate page and trying to come up with better banner ideas. I like the idea of adding an image with a title and short intro text for the desktop version - see below:

https://www.probation-institute.org/donate

However, the mobile version doesn't look quite so good. I'd really welcome any advice on how to make it better on the mobile with any custom coding perhaps. Or, any other suggestions for banners would be really appreciated.

Many thanks in advance.

Richard 

Hey Richard!
You might use a "Card" design within an Image Block for this instead of using a background image...

You'll probably need some width adjustments to that specific page of the index to make it go full screen...

Many thanks. I have wondered that, as I’m sure it will give me more flexibility. Will have a play around 😃

I tried this: https://www.probation-institute.org/donate-copy

Need to figure out how to do full width for image on mobile. 

Do you mean slightly extend the image here, or do you mean when the image is small and still in 2 columns?

I think if I could get the text box and image the same width and height that would great. 

Do you mean when the image is stacked like this or when there are two columns (card and image side by side)?

Also, it doesn't look like you're using the Image "Card" option.  It looks like you're using a color-coded spacer block and a text block...
 

So sorry, I've changed to the card option now, which I thought I'd done. I'm just not liking the look of it.

Many thanks. 

I'd be grateful for any advice on the following please:

• how to change font, font size, font weight without it affecting the rest of the site
• make the image wider so I can have approx. 50% image and 50% text in the card on the desktop
• make the image card full screen width on desktop
• reduce the padding above the image card, just on this page, to bring it closer to the menu
• centre the text vertically and reduce the white section

Many thanks,

Richard

I’d really appreciate it if you’ve any thoughts on this @tuanphan

Many thanks. 

For this page? https://www.probation-institute.org/donate-copy

or this? https://www.probation-institute.org/donate

This one please https://www.probation-institute.org/donate-copy

The other is using the normal banner which seems too difficult to do, unless of course you think otherwise. Very happy to take your advice 👍🏻

/*Collection Padding*/
#collection-64a1d528df04412c40a492b8

{.Main-content
{padding-top:0px !important;
padding-left:0px !important;
padding-right:0px !important;}


/*Image Title*/
.image-title p{color: #ef8c21 !important;
    font-size: 60px !important;
    font-weight: 600 !important;
    font-family: impact !important;}

/*Image Subtitle*/
.image-subtitle p
{    color: #fff !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    font-family: quicksand !important;}


/*Text Position*/
.image-block-card-content-position-top .sqs-block-image .design-layout-card .image-card-wrapper {
    align-items: center  !important;}


/*Card Background*/
.sqs-block-image .design-layout-card .image-card-wrapper
{background-color:#09579f !important;}



/*Card Size*/
.sqs-block-image .design-layout-card:not(.sqs-narrow-width) .image-card-wrapper {
    position: relative;
    width: calc(50% - 2.5%)  !important;}

/*Image Size*/
.sqs-block-image .design-layout-card:not(.sqs-narrow-width)>:first-child {
    width: calc(50% - 2.5%)  !important;}


/*Image Stack*/
@media screen and (max-width: 950px) {
.sqs-block-image .design-layout-card{
    width:100%;
  display:block !important;
}
  
  .sqs-block-image .design-layout-card .image-card
  {padding-top:0px;}
  
  .design-layout-overlap
  .image-title
  {margin-left: 12.5%;}

.sqs-block-image .design-layout-card:not(.sqs-narrow-width) .image-card-wrapper,.sqs-block-image .design-layout-overlap:not(.sqs-narrow-width) .image-card-wrapper {
    width: calc(100%);}
  
.sqs-block-image .design-layout-card:not(.sqs-narrow-width) > :first-child,.sqs-block-image .design-layout-overlap:not(.sqs-narrow-width) > :first-child {
    width: calc(100%);}
}




}

This should get you pretty close...  One thing you need to do is crop your image before you upload it... maybe a 3:2 ratio or 4:3..

If you're talking about the small space on the left and the right, update the .Main-content padding...  I updated the code above to reflect...  For mobile, you can do adjustments as you need... to make it work the way you want.

I updated the code to include additional mobile stacking on devices 950px and below.