Jump to content

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

Recommended Posts

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)
1592178245_ScreenShot2022-11-16at12_29_01PM.thumb.png.8d130609f36f5a54a8bbf7a9949def43.png

2. How it appears on tablet1615664737_ScreenShot2022-11-16at12_29_25PM.thumb.png.a3b8f3511bf496b222312af89bc7c10a.png

3. How it appears on mobile

458953230_ScreenShot2022-11-16at12_26_53PM.thumb.png.c10084f3d2192b58d05d54a4474682ff.png

 

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!

Link to comment
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)
1592178245_ScreenShot2022-11-16at12_29_01PM.thumb.png.8d130609f36f5a54a8bbf7a9949def43.png

2. How it appears on tablet1615664737_ScreenShot2022-11-16at12_29_25PM.thumb.png.a3b8f3511bf496b222312af89bc7c10a.png

3. How it appears on mobile

458953230_ScreenShot2022-11-16at12_26_53PM.thumb.png.c10084f3d2192b58d05d54a4474682ff.png

 

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing

image.thumb.png.7be724d5b9df10ca95cd93055632c2ab.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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

1588125021_ScreenShot2022-11-17at2_12_54PM.thumb.png.aad7b44406f818a0f3839aa5a161dd9d.png

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.

Screenshot_20221117-140252.thumb.jpeg.f651b2a07fa0539b25e4a992c97ba3bd.jpeg

 

Thank you so so much!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.