Appearance on smartphine not right part 2 - Support | Kriesi.at

Viewing 18 posts - 1 through 18 (of 18 total)

Author

Posts
November 1, 2016 at 10:46 pm #706880

DickZirkzee
Participant

Hi there,

see https://www.debeweging.info/over-dick-zirkzee-coaching/

On tablet On the page “Over Dick Zirkzee”, the tagline and button are shifted to the right. Its ok on desktop. Can you give me the code to show
it right on tablet without influencing desktop and smartphone appearance?
thanks
Dick

November 3, 2016 at 4:50 am #707501
Rikard
Keymaster
Hey DickZirkzee,

Please try the following in Quick CSS under Enfold–>General Styling:
```
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.page-id-223 .caption_left .slideshow_caption {
    right: 0;
    left: auto;
}
}
```
Best regards,
Rikard
November 3, 2016 at 6:46 pm #707904

DickZirkzee
Participant

Sorry, didn;t do anything. To be sure: its about appearance on TABLET.
and maybe its important, the tagline and button are created in Full with easy slider and are supposed to be ON the picture. on desktop thats ok, on smartphone is covers the picture, bit thats a problem I will adress later.

November 4, 2016 at 8:07 am #708075

Rikard
Keymaster

Hi,

The code is being applied on my end, it only targets tablet size. Are you checking in your browser or on the actual device? You might need to clear your browser cache and reload a few times in either case. You could also check in a browser in incognito mode.

Best regards,
Rikard

November 5, 2016 at 12:57 pm #708677

DickZirkzee
Participant

Ah it works, Thanks. but i can also see whats going wrong.
On tablet the theme resizes the picture. And the right and left of the pic are white in order to have a good graphic balans on desktop. On tablet the caption and button are now partly on the white part. Can you give me code to move the caption and button to the right, ONLY on tablet? The caption and button are made in full width easy slider.
thanks in advance

Dick

November 6, 2016 at 6:28 am #708776
Rikard
Keymaster
Hi Dick,

Thanks for the feedback, please try this instead:
```
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.page-id-223 .caption_left .slideshow_caption {
    right: 50px;
    left: auto;
    width:50%;
}
}
```
Best regards,
Rikard
November 6, 2016 at 1:52 pm #708846

DickZirkzee
Participant

Sorry,
doesn’t do anything
Dick

November 7, 2016 at 5:54 am #709017

Rikard
Keymaster

Hi Dick,

I can see it active on your live site so it does do something, how are you checking the results?

Best regards,
Rikard

November 7, 2016 at 3:31 pm #709277

DickZirkzee
Participant

Hi Rikard,
I tried some things and found something, it depends on if the tablet is held in landscap or standing up.
With your code the caption and button are shifted to the right, but too much. In landscape nothing happens.
I also noticed that in the standing up position ( the other position then landscape, i’m not sure what word to use in english ) the menu is overlapping the logo.
It would be nice if the standing up version is the same as the landscape, so no responsiveness depending on position of the tablet. But the still the caption and button should be more to the right, but not covering “me” in the foto.
thanks
Dick

November 8, 2016 at 2:23 pm #709796

Andy
Inactive Moderator

Hi,

please follow the instructions here: http://kriesi.at/documentation/enfold/switching-to-mobile-menu-on-higher-resolutions/

Hope this helps!

Best regards,
Andy

November 8, 2016 at 6:57 pm #709928

DickZirkzee
Participant

Hi, aha yes, thats the danger of adding an issue to another issue. Yes, that helps for the menu, thanks a lot BUT NOT for the first problem:
About the caption and button for which you gave me code : I tried some things and found something, it depends on if the tablet is held in landscap or standing up.
With your code the caption and button are shifted to the right, but too much. In landscape nothing happens.
Please go to https://www.debeweging.info/over-dick-zirkzee-coaching/ and see what happens when you make the window smaller on thedesktop or laptop. At the start the button and caption are ok, when making the window smaller, the caption and button disappeat to the right ( tablet in landscape ), when making it even smaller, at the end the button and caption are too far to the right ( tablet upright).

November 9, 2016 at 5:31 pm #710346
Andy
Inactive Moderator
Hi,

this is what I see on iPad screen size:
landscape mode: http://i.imgur.com/Q6qLQAl.png
portrait mode: http://i.imgur.com/d0SA7Yd.png

Your button gets a bit hidden on portrait mode, so use this code inside Quick CSS field:
```
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) {
#top .avia-slideshow-button {
margin-top: -5px;
}}
```
For more possible media queries you might want to use check out this site: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Best regards,
Andy
November 9, 2016 at 10:20 pm #710465

DickZirkzee
Participant

Hi there,
what i see on landscape tablet is this:

View post on imgur.com

I see this on a somewhat older Samsung tablet and on a brandnew chromebook.
When I squeze the image horizontal, the position of the button and caption jump to “on my face”.
I would like the caption and button on the wooden fence, but not on my face :-(
could you provide me with code for that?

by the way thanks for the code to give the full button.
Dick

November 11, 2016 at 2:09 pm #711138
Ismael
Moderator
Hi!

Please look for this code in the Quick CSS field:
```
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.page-id-223 .caption_left .slideshow_caption {
    right: 50px;
    left: auto;
    width:50%;
}
}
```
Replace it with the following code.
```
@media only screen and (max-width: 1200px) and (min-width: 768px) {
.page-id-223 .caption_left .slideshow_caption {
    right: auto;
    left: 100px;
    width: 50%;
}
}
```
Regards,
Ismael
November 12, 2016 at 11:50 am #711428

DickZirkzee
Participant

Hi thanks,
almost there, caption and button are not jumping on my face anymore. The only thing that goes wrong now is that when you decrease the window is size horizontaly, the caption and button are shifted to the left. The white caption text is unreadeble. the ewhite space is part of the picture. So the caption and button position shoud either be fixed on the desktop postition or shifted a bit to the right. Not too much, just enough to keep caption and button on the pic.
thanks
Dick

November 14, 2016 at 12:56 pm #711912
Andy
Inactive Moderator
Hi,

difficult to understand what you mean for me. Screenshots showing the issue and a mockup showing what you want to achieve instead, would help us a lot.

You can adjust your buttons width and height on mobile screen sizes by using this code:
```
@media only screen and (max-width: 768px) {
a.avia-slideshow-button.avia-button.avia-color-blue {
width: 142px;
height: 46px;
}}
```
Adjust the values and the media queries as needed.

Best regards,
Andy
November 14, 2016 at 10:35 pm #712195

DickZirkzee
Participant

ok.
On desktop the page looks like this:

View post on imgur.com

On ( landscape) tablet it changes into this:

View post on imgur.com

and on upright tablet and smartphone it snow this:

View post on imgur.com

So: Caption and button in Full width easy slider element are ok o desktop, move to the left on tablet and move back to appr. the right place on smartphone thanks to your code.
What I want is the ( about) the same position for button and caption on tablet as on desktop.
thanks
Dick

November 15, 2016 at 9:54 pm #712625

Andy
Inactive Moderator

Hi,

so please adjust the media queries as needed. Check this site for more information about landscape tablet etc.: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Best regards,
Andy
Author

Posts

Viewing 18 posts - 1 through 18 (of 18 total)

You must be logged in to reply to this topic.