Mniature of mobile

Shapely
1

Hello,
I found a great picture for the homepage.
On the computer it’s perfect but once on the mobile (responsive).
The thumbnail cuts the image and I lose on the width.
How to keep the image intact or remodel the size and keep the image perfect.
thank you in advance

2

Hi there

Hope you are having a good day :slight_smile:

Let me see it, please provide url and I will take a look

3

First of all its one of the best WP themes I have seen.
It makes total sense to limit options for building a page.

The Avada Theme always drove me nuts, shapely is different.

I have the same problem.
I have a nice picture but as soon its on mobile phones the picture and the headline(s) are not very responsive.
Is there a second mobile option for the start page?

https://testimport.gitarrenunterrichtberlin.de/

4

Good morning

Ok, i see the image but what is the problem?
please note, the main character on this image is on the right side and since its, a parallax image it’s not possible for mobile screens to cover it by this image and center main character

My suggestion is to use a different image for mobile screens, you can use this code to do this:

@media (max-width: 991px){
#shapely_home_parallax-2 .parallax-window.fullscreen {
background-image: url(https://testimport.gitarrenunterrichtberlin.de/wp-content/uploads/2019/07/SRGF0293-e1564516992318.jpg);
background-size: cover;
}
}

Or the same image but with different position:

@media (max-width: 991px){
#shapely_home_parallax-2 .parallax-window.fullscreen {
background-image: url(https://testimport.gitarrenunterrichtberlin.de/wp-content/uploads/2019/07/SRGF0293-e1564516992318.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center right;
}
}

5

Hi Noda.

I was not specific enough.
It’s not the picture, it’s the headlines which overflow left and right.
Is there a way to make the headlines responsive too?

Cheers
A.

6

Good morning

“it’s the headlines which overflow left and right” - Sorry, but i still need your help, can you please share a screenshot? it looks normal from me

7

No worries and thanks for your help.
Here are screenshots taken from real devices.

  1. Android 8 Smart Phone
  2. I Pad short way up.

Is there a way to order the headlines different on mobile devices vs. desktop devices?

Cheers.
A.

8

Good morning

Well, the problem is your code :slight_smile:

#shapely_home_parallax-2 .align-transform {
right: 18%;
}

If you want this code only for desktop devices update it to this:

@media (min-width: 991px) {
#shapely_home_parallax-2 .align-transform {
right: 18%;
}
}

9

@Noda

Thanks for your HELP.

The code you gave me is for desktop devices, but with the desktop version is nothing wrong.

The mobile Version is wrong, see screenshots!!

I want a different heading line on mobile devices!

Cheers
A.

10

Good morning

Have you seen my previous reply?
this is the problem with you, this code:

#shapely_home_parallax-2 .align-transform {
right: 18%;
}

it moves title on the right and you need to make changes to this code to apply only for desktop devices :slight_smile:

11

UI STUPID ME YES I DO HAVE TO READ Properly…

OK thanks it worked now!!

Last question is there a code for the position for different mobile devices only, more left, more right, top etc?

CHEERS.

A.

12

Hellooo my dear :slight_smile:

none of us are stupid here, I know for sure :wink:

“s there a code for the position for different mobile devices only, more left, more right, top etc?” - yes, it is and i already posted it too :smiley:

If you want this code only for desktop devices update it to this:

@media (min-width: 991px) {
#shapely_home_parallax-2 .align-transform {
right: 18%;
}
}

if you use this code as is it will work only for devices above 991 px

13

Got it, took me some time.
Thank you for the great HELP.

14

You are welcome :slight_smile:

I will close this case, let me know if you need anything else