Illdy mobile differences/ not totally responsive

Hi there,

I hope you can help me adopting a mobile Illdy version that looks like the online version.
Online version looks good.

Few things my client wants me to update.
On homepage text in big
Coaching. Kids. Tieners.
Stoer. Vertrouwelijk
is a nice spread. On mobile, it breaks words. Please see attached file.
How can I resolve it so mobile version adopts size of words that it doesn’t break in the middle of the word?

Another thing:
In your services area (we call it traject here) on the computer, you can see an image of two girls,
on mobile version you don’t see it. How can I make this image visible also on the mobile version?
Thanks a lot,
Irena
by the way, I can’t select here private message like before

I see images are not uploaded. So I try it again with small size.
Thanks

Hi there,
Thanks for reaching out.
In reference to the issues here, could you try out the following CSS code under the Appearance>Customize>Additional CSS section:

@media screen and (max-width: 500px){
body #header .bottom-header h1 {
font-size: 30px;
display: inline-block;
}
section#services {
background-image: url(http://www.stoerehelden.nl/wp-content/uploads/2018/04/me_photo_flat.jpg) !important;
background-size: contain;
}
}

I hope this helps.
Best Regards,
Support.

Hi there,

The first park work out! Thanks for that! :))

And the second part, to make the visible image on mobile in service section, didn’t work the way I want it.
It’s visible on mobile, but for every service separate the same image. Means 5 of the same photos after each other.
My client would like only one big photo. As on the homepage is nicely adapted for the mobile version. I hope could be the same for services photo. It could be cut out so you see the middle. Or would be the best if it could be scrolled.
like on the computer.
Thanks a lot!

see attachment how is now.
I removed the code as not nice.
Please advise!
Irena

Hi there,

The background image for services it is not visible on the mobile version. On desktop version looks perfect.

With this custom CSS, its multiplied in 5 small images for the mobile version. See image attached.

Mobile version should look like a desktop. Please advise. Thanks a lot!!

Also, a divider (with a skater image) after text about me doesn’t scroll with a mobile version. The desktop is fine!
maybe is not possible or?? Would be nice.
Thanks again!

Irena

Most customers of local businesses search for information in a regular browser, and a responsive web design will allow them to connect with your business from anywhere without additional marketing to point them to your app.

Hi @Irena,
Thanks for keeping in touch.
As for the divider, apparently I’m not in a position to spot this from my end.
In relation to the image issue, please adjust the previous CSS code to this:

#services {
padding-top: 0px!Important;
background-image: url(http://www.stoerehelden.nl/wp-content/uploads/2018/04/me_photo_flat.jpg) !important;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 100%;
}

I hope this helps.
Kind Regards.

the last update made my site look horrendous, and I went running back to my child theme. It’s meant that some of my links won’t change to the right colour, but I’m trying to work on more important things at the moment… in the grand scheme of things, a few yellow hover links don’t make a difference.
Bluestacks TextNow Photomath

Hi @Zimou13,
Thanks for writing in.
In reference to your query here, could you kindly open a separate ticket and provide us with a link to your site within it so as to avoid any sort of confusion here.

I look forward to your reply.
Kind Regards.

Dear support,

Thanks for your email!
This CSS helped in the way that was nice visible on mobile, but on the computer was not any more scrollbar like before. Also on the computer, heads were cut out, so heads were not completely visible.
So I removed the code again.

I hope you can find a way for that!

I send my temporary login to your colleague about helping with getting logo sharp ( from another ticket). Maybe, the developer can try to arrange this too?
Let me know how can you help me?
Thanks a lot!!
irena

Dear support,

Also, the site is on mobile sometimes very slow. it comes to 99% then waiting for long. Before I didn’t have this problem. I updated now few images with lower resolution.

What do you think why is that? On the computer is nice fast.

Hi there,

Sorry to bother, but still didn’t get a reply.

Hot to get the background image for services visible on the mobile version as 1 image
and still scrollbar on the desktop version?
As with this last code, desktop version was not scrollbar anymore.

please advise,
thanks,
irena

Hi there,

Its been a week and still didn’t get the answer.
I hope somebody can look into this?

Thanks!
irena

HI

Sorry but to be honest not clearly understand what exactly is the problem? can you reformulate it in few words?

Hi Noda,

The photo that is used under services doesn’t show up properly on the mobile version (here is called traject, photo of 2 girls).

On mobile, you can see ends of this photo, blurry, looks like something went wrong.

When I first ask this, I got code where on the mobile was visible, but 5 times the same image. see attached. Didn’t look good.

And the second time support gave me the code where was this photo on the mobile good, one big image cut out in the middle, but then on the computer was not scrolling and was also cut out so you couldn’t see the eyes of the girls.

So how to make this service section that computer looks as it is and mobile has the same background image only 1 time.

I am attaching first two examples.
I hope it’s doable.

Thanks for your help!
Irena

hi Irena

OK, this is the most asked question in the forum, “background image is good on the desktop but bad on the mobile”, Irena you do not consider the main thing, your image is with characters on it (2 kids) and its landscape image, its impossible to fit this landscape image on the portrait screens and not crop or not damage it. Screens are very different from desktop to mobile screens, desktop screens are landscape while mobile screens are a portrait, plus tablet screens are in between, when you choose an image with persons and characters how do you imagine to fit this image without crop on both screens? :slight_smile: it’s simply not possible,
Solution - you have to choose raw images without characters on it or accept this situation as is, its impossible to deal with this only with CSS, this will require major CSS investigation

Hi Noda,

Thanks for your explanation!
I understand the difference between the mobile and desktop format and changes of the images.

My client is children coach and she wanted some photos of children not landscape for the coaching website.
And I specially made this portrait photo she was happy about.

Homepage image has also two children and is scrollbar on the desktop and nicely cropped on mobile (not the ends of photo). Exactly the same I wanted for service section. On desktop to look as it is and on mobile to have one the same image, cut in where the center of the image should be seen, not the outline of the image.

I am the graphic designer, not a programmer and can imagine it’s very challenging, but I hope there is some possibility for this image is seen on mobile in the middle. Doesn’t matter if is not perfect, just that you see the center of the image, adapted to mobile, not the ends of the photo.

service section

Thanks a lot!
Appreciate your time!
Irena

hi Irena

Sorry, I understand your concern and i want to help but not everything is possible in the free support scopes, Im not saying this is not possible but this will require additional CSS styling and some custom work, otherwise you may need to consider default styling and different image, or maybe to implement third-party page builder with rich page building features…

Hi Noda,

Thanks for your answer!

I’ll hope we find the way.
Just don’t know any page builders…
Do you know for this kind of small things some only service?
And I leave you in peace with this :slight_smile:
I understand free support.

Have a nice day!
Irena

You can use upwork, envato studio any freelance platform you like :slight_smile:
Irena, thank you for understanding, i hope i will be more helpful in your next ticket
i will close this one