Fix homepage photos to show as correct size on mobile - Focal theme

norahnewhouse · March 26, 2022, 7:21pm

I have two photos on my homepage that are being compressed and not showing the full photo on mobile but look exactly how they are supposed to be on desktop. How can I have the full size regularly cropped photos I have show up correctly on my mobile homepage? Focal code only please!

If needed my site is https://newhouseofvintage.myshopify.com and the entry password is ropowg.

AvadaCommerce · March 27, 2022, 12:28am

Hi @norahnewhouse ,

You can follow the instruction below:

Go to Online Store->Theme->Edit code
Asset->/theme.css->paste below code at the bottom of the file:

@media (max-width: 990px) {
.slideshow__image {
    -o-object-fit: contain !important;
    object-fit: contain !important;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

norahnewhouse · March 27, 2022, 1:09am

Sadly that did not fix the problem The photos that I have uploaded are image with text overlay options

AvadaCommerce · March 27, 2022, 1:29am

Hi @norahnewhouse ,

Sorry, I messed up with the slideshow section.

You can follow the instruction below:

Go to Online Store->Theme->Edit code
Asset->/theme.css->paste below code at the bottom of the file:

.image-overlay__image {
    -o-object-fit: contain !important;
    object-fit: contain !important;
}

Then find file section image-with-text → Search “crop:” → Then remove value crop, ex: “, crop: ‘center’”

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

norahnewhouse · March 29, 2022, 12:25am

This did not work either. Are you sure this is the correct code for Focal?

AvadaCommerce · March 29, 2022, 12:48am

Hi @norahnewhouse ,

Can you share this code section for us to test?

Thanks you

norahnewhouse · March 29, 2022, 8:41pm

I am having a difficult time finding this section of the code… There seems to be many lines that say “image-with-text” but none that I can see that also say “crop:” . Could you please take a look and tell me what line number(s) this code would be on? Sorry I am new to all of this. I really appreciate your help!

AvadaCommerce · March 30, 2022, 2:16am

Hi @norahnewhouse ,

can you share all the code in the image-with-text.liquid file?

Thanks you

norahnewhouse · April 1, 2022, 10:42pm

.image-with-text__navigation-item {
position: relative;
}

.image-with-text__navigation-item::before,
.image-with-text__navigation-item::after {
content: ‘’;
display: block;
width: 100%;
height: 2px;
margin-bottom: 16px;
background: rgba(var(–text-color), 0.15);
}

[dir=“ltr”] .image-with-text__navigation-item::after {
left: 0;
}

[dir=“rtl”] .image-with-text__navigation-item::after {
right: 0;
}

.image-with-text__navigation-item::after {
position: absolute;
top: 0;
background: rgb(var(–text-color));
transform-origin: var(–transform-origin-start);
transform: scaleX(0);
}

.image-with-text__navigation-item[aria-current=“true”]::after {
animation: navigationItemAnimation var(–section-autoplay-duration) linear;
animation-play-state: var(–section-animation-play-state, running);
}

@media screen and (max-width: 999px) {
/* Extra spacing just for the pocket devices */
.image-with-text {
padding: var(–vertical-breather) var(–container-gutter);
}

.image-with-text–boxed {
padding: var(–container-gutter);
}
}

@media screen and (min-width: 741px) and (max-width: 999px) {
.image-with-text {
–image-height: calc((100vw - var(–container-gutter) * 2 - (var(–grid-column-width) + var(–grid-gap)) * 4) * (1.0 / var(–image-aspect-ratio)));

padding: var(–vertical-breather) calc((var(–grid-column-width) + var(–grid-gap)) * 2);
}

.image-with-text–boxed {
padding: var(–vertical-breather) calc((var(–grid-column-width) + var(–grid-gap)) * 2 + var(–container-gutter));
}

.image-with-text__image-wrapper {
margin-bottom: 48px;
}
}

@media screen and (min-width: 1000px) {
[dir=“ltr”] .image-with-text::before {
left: auto;
right: 0;
}
[dir=“rtl”] .image-with-text::before {
right: auto;
left: 0;
}
.image-with-text::before {
height: 100%;
top: 0;
width: calc(var(–grid-column-width) * 13 + (var(–grid-gap) * 12) + var(–container-outer-margin));
}

[dir=“ltr”] .image-with-text–reverse:not(.image-with-text–overlap-image)::before,[dir=“ltr”]
.image-with-text–overlap-image:not(.image-with-text–reverse)::before {
left: 0;
right: auto;
}

[dir=“rtl”] .image-with-text–reverse:not(.image-with-text–overlap-image)::before,[dir=“rtl”]
.image-with-text–overlap-image:not(.image-with-text–reverse)::before {
right: 0;
left: auto;
}

.image-with-text–overlap-image::before {
width: calc(var(–grid-column-width) * 7 + (var(–grid-gap) * 6) + var(–container-outer-margin));
}

.image-with-text–overlap-both::before {
width: 100% !important; /* When it overlap both we force it to be 100% */
}

.image-with-text__wrapper {
display: flex;
padding: var(–vertical-breather) 0;
align-items: center;
}

.image-with-text–reverse .image-with-text__wrapper {
flex-direction: row-reverse;
}

[dir=“ltr”] .image-with-text__image-wrapper {
margin-left: calc(var(–grid-column-width) + var(–grid-gap));
}

[dir=“rtl”] .image-with-text__image-wrapper {
margin-right: calc(var(–grid-column-width) + var(–grid-gap));
}

.image-with-text__image-wrapper {
width: calc(var(–grid-column-width) * 8 + (var(–grid-gap) * 7));
margin-bottom: 0;
}

[dir=“ltr”] .image-with-text–reverse .image-with-text__image-wrapper {
margin-left: 0;
margin-right: calc(var(–grid-column-width) + var(–grid-gap));
}

[dir=“rtl”] .image-with-text–reverse .image-with-text__image-wrapper {
margin-right: 0;
margin-left: calc(var(–grid-column-width) + var(–grid-gap));
}

.image-with-text__content-wrapper {
width: calc(var(–grid-column-width) * 9 + (var(–grid-gap) * 8));
margin-left: auto;
margin-right: auto;
}
}

@media screen and (min-width: 1200px) {
.image-with-text__navigation {
margin-top: 48px;
column-gap: 40px;
}
}

@media screen and (min-width: 1400px) {
[dir=“ltr”] .image-with-text__content-wrapper {
margin-right: calc((var(–grid-column-width) + var(–grid-gap)) * 2);
}
[dir=“rtl”] .image-with-text__content-wrapper {
margin-left: calc((var(–grid-column-width) + var(–grid-gap)) * 2);
}
.image-with-text__content-wrapper {
width: calc(var(–grid-column-width) * 7 + (var(–grid-gap) * 6));
}
}
.image-with-text-block {
display: block;
}

.image-with-text-block__image-wrapper {
overflow: hidden;
background: rgb(var(–secondary-background)); /* Act as a filler */
}

.image-with-text-block__content {
padding: 48px 24px;
background-color: rgb(var(–section-block-background));
border-radius: var(–block-border-radius);
}

.image-with-text-block__text-container {
margin-top: 24px;
}

@media screen and (max-width: 1400px) {
.image-with-text-block__content {
width: auto;
}

.image-with-text-block–overlap-left .image-with-text-block__content,
.image-with-text-block–overlap-right .image-with-text-block__content {
margin: calc(-1 * var(–container-gutter)) var(–container-gutter) 0;
padding: 40px;
}

.image-with-text-block:not(.image-with-text-block–overlap-left):not(.image-with-text-block–overlap-right) .image-with-text-block__content {
border-radius: 0;
}

/* Cover variation: on this mode, the image will still cover the image. There is a bit of duplication of
code but I could not find cleaner way */
.image-with-text-block–cover {
position: relative;
display: flex;
align-items: center;
}

[dir=“ltr”] .image-with-text-block–cover .image-with-text-block__image-wrapper {
left: 0;
}

[dir=“rtl”] .image-with-text-block–cover .image-with-text-block__image-wrapper {
right: 0;
}

.image-with-text-block–cover .image-with-text-block__image-wrapper {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}

.image-with-text-block–cover .image-with-text-block__image {
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}

.image-with-text-block–cover .image-with-text-block__content {
padding: var(–container-gutter);
margin: var(–vertical-breather) var(–container-gutter);
}
}

@media screen and (min-width: 741px) and (max-width: 999px) {
.image-with-text-block–cover .image-with-text-block__content {
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
}

@media screen and (min-width: 741px) {
.image-with-text-block__content {
padding-left: 48px;
padding-right: 48px;
}
}

@media screen and (min-width: 1000px) {
.image-with-text-block {
position: relative;
display: flex;
align-items: center;
min-height: 500px;
}

[dir=“ltr”] .image-with-text-block__image-wrapper {
left: 0;
}

[dir=“rtl”] .image-with-text-block__image-wrapper {
right: 0;
}

.image-with-text-block__image-wrapper {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}

[dir=“ltr”] .image-with-text-block__image {
left: 0;
}

[dir=“rtl”] .image-with-text-block__image {
right: 0;
}

.image-with-text-block__image {
position: absolute;
top: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}

.image-with-text-block__content {
margin-top: var(–vertical-breather);
margin-bottom: var(–vertical-breather);
}

/* Overlap variation */

.image-with-text-block–overlap-right .image-with-text-block__image-wrapper,
.image-with-text-block–overlap-left .image-with-text-block__image-wrapper {
width: calc(var(–grid-column-width) * 14 + (var(–grid-gap) * 13) + var(–container-outer-margin));
}

[dir=“ltr”] .image-with-text-block–overlap-left .image-with-text-block__image-wrapper {
right: 0;
}

[dir=“rtl”] .image-with-text-block–overlap-left .image-with-text-block__image-wrapper {
left: 0;
}

[dir=“ltr”] .image-with-text-block–overlap-left .image-with-text-block__image-wrapper {
left: auto;
}

[dir=“rtl”] .image-with-text-block–overlap-left .image-with-text-block__image-wrapper {
right: auto;
}
}

@media screen and (min-width: 1200px) {
.image-with-text-block {
min-height: 700px;
}

.image-with-text-block–small {
min-height: 400px;
}

.image-with-text-block__content:not(.image-with-text-block__content–tight) {
padding: 64px;
}
}

I hope this is what you’re asking for!

AvadaCommerce · April 2, 2022, 1:35am

Hi @norahnewhouse ,

No, no

Can you share the code liquid section? The code you send it is the css code.

Thanks you

norahnewhouse · April 4, 2022, 10:39pm

I’m afraid I don’t understand/don’t know how to. Can you explain? I am so not tech-wise unfortunately and very new to this platform

AvadaCommerce · April 5, 2022, 2:03am

Hi @norahnewhouse ,

If. You can hire a shopify expert to assist you. Since I’m not in your admin, I’m not sure how to guide you

Thanks you

Topic		Replies	Views
Theme Focal: The image should fill the border /left and right in the mobile view Store Design liquid , customizations , css	9	24	January 23, 2025
Image with text overlay different desktop and mobile image Store Design design , customizations , css , shopify-themes	3	14	July 13, 2023
Photo's homepage are not shown completely Mobile narrative Store Design	0	8	September 29, 2021
Why is my homepage image not fitting correctly on mobile view? Store Design	24	113	August 24, 2023
Image with Text Overlay is cut off on mobile (Using Fashionopolism theme) Store Design design , customizations , collection-page	3	30	September 27, 2024

Fix homepage photos to show as correct size on mobile - Focal theme

Related topics