[Resolved] Different size top image on website

[rafel jesus]

Hi there.
On one of my websites, there are different sizes on the top image, I review how to change the settings in Elements but in three of the pages, the image on mobile are differents.

I like this one, and all the settings are the same.

Some idea how Can I solve it?
Thanks

[Ying]

Hi there,

I review how to change the settings in Elements but in three of the pages, the image on mobile are differents.

Not sure I fully understand your question, are we talking about this image?
https://www.screencast.com/t/y9SQigNGTLaD

What is the issue, can you explain some more. If the issue occurs in other pages, can you also link the pages so we can compare and see the issue?

[rafel jesus]

Hi, Ying
On the desktop version at the moment, it works perfectly.
Is in the mobile version in the images have a different format, I checked the hook settings where it affects some pages, another thing is multisite so I have the same settings on every page.

Thanks for your help.

[Ying]

I checked the hook settings where it affects some pages, another thing is multisite so I have the same settings on every page.

I’m not sure whathook settings means, this image is in the page, not hooked in by a hook element or block element.

So it should not affect any other pages..

[rafel jesus]

Hi Ying.
On the pages work with Hook
We are (Nosotros)
Contact (contact)
My Account (Mi cuenta)

The main page works the image is on the page.

In all those pages in mobile view, the image is in a different format
We are (Nosotros)
Contact (contact)
My Account (Mi cuenta)
Main Page

That’s the setting on hook background.

That’s the setting on main page background.

Thanks for your help and patience.

[Elvin]

Hi there,

I’m not sure as well what you’re trying to do.

To clarify: Are you trying to apply the same styling of the Block Elements used on pages We are (Nosotros), Contact (contact) and My Account (Mi cuenta)?

If that’s the case, you can do the following:

1.) Create a new Block Element – Page Hero
2.) Copy the contents of the Global Page Hero block
3.) Paste it to the new Block Element.
4.) Edit it a bit to add the “Botiga Online –>” button.
5.) Set the display rule location to “Front Page.
6.) Edit your Home page.
7.) Delete the first section. (this is so there’s no duplicate hero section. we’re going to have a new hero section coming from the newly created Block element)

This way, ALL the pages will have uniform format of hero section sizing even while having 2 Block Elements. (one for front page, another for the rest of the page)

[rafel jesus]

Hi Elvin

To clarify: Are you trying to apply the same styling of the Block Elements used on pages We are (Nosotros), Contact (contact) and My Account (Mi cuenta)?

Yes, I will do that, and I gonna do the steps that you said to me.
Thanks.

[Elvin]

No problem. Let us know how it goes. 😀

[rafel jesus]

Hi Elvin
Your solution will resolve the view of the main image on all pages?, that is my issue.

Look at this video

Thanks.

[Elvin]

It should assuming done correctly.

The whole point of the suggestion was to duplicate your Global Page hero to another Block element and set this new Block element for front page display so everything is uniform.

I’ve checked your site again and it doesn’t seem like it’s implemented. The home page is still using it’s first section as the Page hero instead of something placed by a Block element.

[rafel jesus]

Hi Elvin

It should assuming done correctly.

The whole point of the suggestion was to duplicate your Global Page hero to another Block element and set this new Block element for front page display so everything is uniform.

I’ve checked your site again and it doesn’t seem like it’s implemented. The home page is still using it’s first section as the Page hero instead of something placed by a Block element.

No, I didn’t do the changes when I upload the video.

Thanks

[rafel jesus]

Hola Elvin.
Me explicare en castellano ya que parece que con mi Ingles no termino de explicarlo bien.
En la versión de escritorio se puede ver toda la imagen entera de la pareja en la izquierda y el texto en la derecha, perfecto eso es lo que deseo.
Y en la versión móvil deseo lo mismo que se vea la imagen entera como se ve en la versión de escritorio y si te fijas en las distintas capturas y el vídeo en las distintas paginas de la web la imagen no se ve entera, que es lo que yo deseo.
No se si con Hook Elements, se puede solucionar o en apareciencia, que también me he mirado la configuración.

Como has podido ver en la configuración del Hook Element page hero hay reglas de exclusión que no se vea en todos los sitios de la web, ahí puedo dejar de excluir la pagina principal para que se sea como las tres paginas que he comentado en otros post.

Ahora mismo estoy algo perdido.
Gracias por tu ayuda y paciencia.

Hi Elvin.
I will explain myself in Spanish since it seems that with my English I do not finish explaining it well.
In the desktop version you can see the entire image of the couple on the left and the text on the right, perfect that’s what I want.
And in the mobile version I want the same to see the whole image as it does in the desktop version and if you look at the different captures and the video on the different pages of the web, the image does not look whole, which is what that I want.
I do not know if with Hook Elements, it can be solved or apparently, that I have also looked at the configuration.

As you can see in the configuration of the Hook Element page hero, there are exclusion rules that are not seen in all the sites of the web, there I can stop excluding the main page so that it is like the three pages that I have commented in other posts .

Right now I am somewhat lost.
Thanks for your help and patience.

[Elvin]

Ah I see, you’re aiming for something like this? – https://share.getcloudapp.com/6quv1K4K

If so, then just go to your Home page’s section and reduce it’s padding-top from 120px to 60px on Mobile settings. This way the image doesn’t scale up meaning both person on the background will fit the viewport.

Note: It won’t be perfect on all viewports. Cropping will be inevitable on smaller devices.

[rafel jesus]

Hi Elvin.
I did the changes but I can’t see that you uploaded.(https://share.getcloudapp.com/6quv1K4K)

I change from 120 px to 60px padding

Thanks

[Elvin]

You then change the background-position to top left and add hide-on-mobile on the additional CSS class(es) of the spacer block you’ve added on the container so it doesn’t appear on mobile.

Note: The idea is to reduce the container block’s height so the background image scales down, effectively making the 2 persons fit on the screen on smaller viewports.

[Author]

Posts