7 replies [Last post]
Zerosurf
Zerosurf's picture
Offline
newbie
Last seen: 3 years 49 weeks ago
Timezone: GMT+2
Joined: 2015-09-01
Posts: 5
Points: 6

Hi,
I try to customize a design with 2 logos in the header - both are png - logo.png and logo2.png.
When i view it on the cellphone the logo2 isn´t set very nice - I want to make it close to the first on underneath:

Here is the adress, so you can see what I try to accomplish:

http://www.ayourveda.at

I hope, someone can help me with that!

the css is here:
http://www.ayourveda.at/templates/daflekk/style.css

sincerely,
Zerosurf

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 weeks 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Hi zerosurf, The second image

Hi zerosurf,
The second image needs to be trimmed, it has a lot of transparent pixels around it.
So you could trim it and reposition on larger screens and it should work fine on mobile.
Or you could clip the image.
If possible go with the first option.

Zerosurf
Zerosurf's picture
Offline
newbie
Last seen: 3 years 49 weeks ago
Timezone: GMT+2
Joined: 2015-09-01
Posts: 5
Points: 6

Hi Tony, of course - I should

Hi Tony, of course - I should have thought about that first - trimming the picture! Sometimes you don´t see the easiest solution - I will try that! Many thx!!!!

Sincerely
Zerosurf

Zerosurf
Zerosurf's picture
Offline
newbie
Last seen: 3 years 49 weeks ago
Timezone: GMT+2
Joined: 2015-09-01
Posts: 5
Points: 6

OK - now I trimmed the second

OK - now I trimmed the second logo2.png but now I can`t figure out what css code to set, to work it properly on smaller screens?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 weeks 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

what do you mean by work it

what do you mean by work it properly?
I think you need to trim the rest of the sides from the image and adjust the header, ie remove the height restriction.
Then maybe scale down the images as the screen srinks.

Zerosurf
Zerosurf's picture
Offline
newbie
Last seen: 3 years 49 weeks ago
Timezone: GMT+2
Joined: 2015-09-01
Posts: 5
Points: 6

the whole logo2.png is

the whole logo2.png is trimmed down - when it comes to smaller screens the logo2.png should be centered right under the logo.png which should also be centered. how can i do that?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 weeks 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

It was the margin bottom on

It was the margin bottom on the second pic I thought was still a transparent part of the image.
Remove the height from header so the images don't push out over it, you can also remove the float and width properties.
Instead of max-width on the images in your mobile media styles use width 60% and margin-left: 20%;

Zerosurf
Zerosurf's picture
Offline
newbie
Last seen: 3 years 49 weeks ago
Timezone: GMT+2
Joined: 2015-09-01
Posts: 5
Points: 6

Awesome - that´s exactly what

Awesome - that´s exactly what I needed - many, many thanks!!!!