Text forced onto single line - Website and mobile

Store Design
, ,
1

Hi i have two things i’m unable to resolve and need help;

On my mobile layout i am getting the text box floating above my image - it looks great in desktop view as the text sits over image but for mobile it only above it.

My second is the text box container forces the text over two line - can i inject code to force it to stay on one single line? - www.wearenarc.com (home page)

Hund1256_0-1686214242796.png
Hund1256_0-1686214242796.png400×156 32.8 KB

Hund1256_1-1686214242902.png
Hund1256_1-1686214242902.png339×399 62.9 KB

2 Likes
2

@Hund1256

Please add the following CSS code to your assets/theme.css bottom of the file.

.content-over-media>:not(img,video,iframe,svg,video-media) {
    max-width: max-content !important;
}

Thanks!

1 Like
3

Thank you so much, it worked perfectly for the website. Is there anyway we can get the image to be in the background for the mobile site, as now it is just white?

4

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.css and paste this at the bottom of the file:
.content-over-media.full-bleed.text-custom .place-self-start-center {
    max-width: 100%;
}
@media (max-width:767px){
.section-stack {
    position: relative;
}
.section-header.md\:hidden {
    position: absolute;
    top: 2%;
    z-index:10
}
}

Desktop :-

ZestardTech_0-1686226384329.png
ZestardTech_0-1686226384329.png1919×784 76.9 KB

Mobile device :-

ZestardTech_1-1686226455709.png
ZestardTech_1-1686226455709.png759×905 131 KB

1 Like
5

Is it possible to have the text and button in the centre as well. It doesn’t give me the option within the theme to do so.

1 Like
6

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.css and paste this at the bottom of the file:
.content-over-media.full-bleed.text-custom .place-self-start-center {
max-width: 100%;
}
@media (max-width:767px){
.section-stack {
position: relative;
}
.section-header.md\:hidden {
position: absolute;
top: 37%;
z-index:10
}
}
1 Like
7

Sorry i was not clear in my description. It still needs to be at the top, i guess top-centre instead of lower down.

1 Like
8

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.css and paste this at the bottom of the file:
.content-over-media.full-bleed.text-custom .place-self-start-center {
    max-width: 100%;
}
@media (max-width:767px){
.section-stack {
    position: relative;
}
.section-header.md\:hidden {
    position: absolute;
    top: 4%;
    z-index:10
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
}
}

ZestardTech_0-1686229435556.png
ZestardTech_0-1686229435556.png1336×794 69.4 KB

1 Like
9

The text disappears when on mobile - it is not like your screenshot.

Screenshot 2023-06-08 at 14.10.59.png
Screenshot 2023-06-08 at 14.10.59.png960×1326 101 KB

1 Like
10

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.css and paste this at the bottom of the file:
.content-over-media.full-bleed.text-custom .place-self-start-center {
    max-width: 100%;
}
@media (max-width:767px){
.section-stack {
    position: relative;
}
.section-header.md\:hidden {
    position: absolute;
    top: 4%;
    z-index:10;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
}
.prose {
    text-align: center;
    margin: 0 auto;
}
}
11

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.css and paste this at the bottom of the file:
.content-over-media.full-bleed.text-custom .place-self-start-center {
    max-width: 100%;
}
@media (max-width:767px){
.section-stack {
    position: relative;
}
.section-header.md\:hidden {
    position: absolute;
    top: 4%;
    z-index:10;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
}
.prose {
    text-align: center;
    margin: 0 auto;
}
}
1 Like
12

Thank you so much! This work perfectly. Appreciate your help and patience. I do have a separate forum question i would love answering, but you have given me lots of your time already so understand if not.

https://community.shopify.com/c/shopify-design/product-page-unique-boxes/td-p/2091262