Move text from below card image to beside on mobile and tablet

In my footer i have an image with text (card format). It looks great on a full screen because the text appears to the right of the image. But on tablet and mobile it moves the text to below. Is there a way to keep the text always to the right of the image?

Here's the URL again https://africanaeconomics.com/

For clarity here are some images

1. How it looks on full screen (and how i would like it to appear on all devices)

2. How it appears on tablet

3. How it appears on mobile

If it helps this is my custom code (in footer)

<style>
  /* portal mobile screens */
@media only screen and (max-width: 640px) {
  #block-yui_3_17_2_1_1668448990919_3400{
  width: 50%;
  }
}

/* portal tablet screens */
@media only screen and (max-width: 768px) {
  #block-yui_3_17_2_1_1668448990919_3400{
  width: 50%;
  }
}

  /* contact mobile screens */
@media only screen and (max-width: 640px) {
  #block-yui_3_17_2_1_1668546648499_3526{
  width: 35%;
  }
}

/* contact tablet screens */
@media only screen and (max-width: 768px) {
  #block-yui_3_17_2_1_1668546648499_3526{
  width: 55%;
  }
}

</style>

Thanks so much guys!

20 hours ago, JTeich said:

In my footer i have an image with text (card format). It looks great on a full screen because the text appears to the right of the image. But on tablet and mobile it moves the text to below. Is there a way to keep the text always to the right of the image?

Here's the URL again https://africanaeconomics.com/

For clarity here are some images

1. How it looks on full screen (and how i would like it to appear on all devices)

2. How it appears on tablet

3. How it appears on mobile

 

If it helps this is my custom code (in footer)

<style>
  /* portal mobile screens */
@media only screen and (max-width: 640px) {
  #block-yui_3_17_2_1_1668448990919_3400{
  width: 50%;
  }
}

/* portal tablet screens */
@media only screen and (max-width: 768px) {
  #block-yui_3_17_2_1_1668448990919_3400{
  width: 50%;
  }
}

  /* contact mobile screens */
@media only screen and (max-width: 640px) {
  #block-yui_3_17_2_1_1668546648499_3526{
  width: 35%;
  }
}

/* contact tablet screens */
@media only screen and (max-width: 768px) {
  #block-yui_3_17_2_1_1668546648499_3526{
  width: 55%;
  }
}

</style>

Thanks so much guys!

Try adding to Home > Design > Custom Css

@media only screen and (max-width: 768px) {
  #block-yui_3_17_2_1_1668448990919_3400 {
    width: 100%;

  }
  #block-yui_3_17_2_1_1668448990919_3400   .intrinsic {
    width: 50%;
    float: left;
  }
}

Support me by pressing 👍  or marking as solution if this useful for you

My testing

4 hours ago, Beyondspace said:

Try adding to Home > Design > Custom Css

@media only screen and (max-width: 768px) {
  #block-yui_3_17_2_1_1668448990919_3400 {
    width: 100%;

  }
  #block-yui_3_17_2_1_1668448990919_3400   .intrinsic {
    width: 50%;
    float: left;
  }
}

Support me by pressing 👍  or marking as solution if this useful for you

Thank you so so much! One thing though.

When i look at it in the squarespace mobile preview it looks great, like this

But when i pull it up on my own phone, it looks like this. Would you have any idea why that might be? I thought it might be because my screen is extra large (1440 x 2880 pixels), but it doesn't seem to matter what number i substitute for 640px.

Thank you so so much!