Issues with elements layout on mobile devices - Support | Kriesi.at

Tagged: design, issues, mobile

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

Author

Posts
August 21, 2016 at 11:34 pm #675452

vadikcoma
Participant

Hello, how do I make site look better on mobile?

Site – http://sirius.coma.lv/

1) some images in full screen slider dont display on mobile – http://sirius.coma.lv/

https://dl.dropboxusercontent.com/u/2547869/sirius/IMG_0496.PNG
https://dl.dropboxusercontent.com/u/2547869/sirius/IMG_0497.PNG

2) page titles are overlapping with logo

https://dl.dropboxusercontent.com/u/2547869/sirius/IMG_0499.PNG

3) how to remove border from menu closing button?

https://dl.dropboxusercontent.com/u/2547869/sirius/IMG_0500.PNG

4) footer menu doesnt show up on mobile

https://dl.dropboxusercontent.com/u/2547869/sirius/IMG_0501.PNG

August 23, 2016 at 2:59 pm #676455
Yigit
Keymaster
Hey vadikcoma,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
```
@media only screen and (max-width: 1024px) {
#av_section_1 .content {
    padding-top: 100px;
}}
#advanced_menu_toggle, #advanced_menu_hide {
    border: none;
}
@media only screen and (max-width: 767px){
.responsive #socket .sub_menu_socket {
    display: block !important;
}}
```
Best regards,
Yigit
August 23, 2016 at 3:19 pm #676464

vadikcoma
Participant

Thanks,

1) this issue is not fixed, second image on homepage is not displaying
2) this is fixed, thanks
3) this is fixed, thanks
4) this is almost fixed, is there any way to make line spacing between menu items larger? Now they are so close to eachother, that its not possible to open page you need.

Thank you!

August 23, 2016 at 3:39 pm #676475

vadikcoma
Participant

4) can footer menu start on one line as social icons? – https://dl.dropboxusercontent.com/u/2547869/sirius/IMG_0510.PNG

August 23, 2016 at 3:56 pm #676489
Yigit
Keymaster
Hey!

1- You can refer to this post – http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/ and display different elements on desktop and on mobile
4- Please add following code to Quick CSS as well
```
@media only screen and (max-width: 767px) {
#socket .sub_menu_socket li {
    margin-bottom: 10px;
}}
```
Best regards,
Yigit
August 23, 2016 at 5:08 pm #676554

vadikcoma
Participant

4) thank you it works great. However I would like to have whole block a bit higher, in line with social buttons. I’ve updated old screenshot – https://dl.dropboxusercontent.com/u/2547869/sirius/IMG_0510.PNG

1) that is not really what I mean. I mean, that I have fullscreen slider on home page, and its really cool. Slider works on mobile, but for some reason on mobile second image is grayed out. First image is perfect, but second image is not showing up.

Thank you!

August 24, 2016 at 2:07 pm #676968
Yigit
Keymaster
Hi,

1- I cannot reproduce the issue on my end. Do you have any special characters in your file names such as “å”? If you have, please edit your images and use only simply latin characters in your file names.

4- Please change the last part of the code in my first post to following one
```
@media only screen and (max-width: 767px) {
.responsive #socket .sub_menu_socket {
    display: block !important;
    margin-right: 15%;
    margin-top: -15px;
}}
```
Best regards,
Yigit
August 24, 2016 at 3:57 pm #677066

vadikcoma
Participant

1) I’ve checked both slides filename, they are “dog” and “bird” without any special characters. Here are screens of first and second slide on a mobile device. On PC everything is perfect

first slide – https://dl.dropboxusercontent.com/u/2547869/sirius/IMG_0497.PNG
second slide – https://dl.dropboxusercontent.com/u/2547869/sirius/IMG_0496.PNG

I will give you access to admin, maybe you will be able to spot issue there

2) thanks! It works

August 25, 2016 at 5:58 am #677344

Vinay
Inactive Moderator

Hi,

I checked your site on my android phone and both the slides show up fine. Please let us know more details about the phone and the browser you are using.

Best regards,
Vinay

August 25, 2016 at 1:56 pm #677501

vadikcoma
Participant

I’m using iphone 5s. This problem appears in both Safari and Chrome for iOS

August 30, 2016 at 4:32 am #679245

Ismael
Moderator

Hi,

The sliders images are loading on my device properly. However, it takes a bit longer because of the images are a bit too big(3500x2377px). Half that size should be enough to cover standard screen resolutions.

Best regards,
Ismael

August 30, 2016 at 1:02 pm #679386

vadikcoma
Participant

Hi Ismael, this is very strange, because both images are absolutely the same size both in dimensions and filesize.

August 30, 2016 at 1:04 pm #679387

vadikcoma
Participant

I’ve resized both images to 2200px and now they both work. This ticket can be closed, thanks!
Author

Posts

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

The topic ‘Issues with elements layout on mobile devices’ is closed to new replies.