site not being as responsive for mobile devices over 700 pixels wide - Support

Tagged: enfold, iPad, responsive

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

Author

Posts
August 25, 2016 at 3:26 pm #677556

honestgraphics
Participant

Kindle Fire HD 8.9
http://quirktools.com/screenfly/#u=http%3A//www.medicalartshenderson.com&w=800&h=1279&a=24&s=1

Apple Ipad (All)
http://quirktools.com/screenfly/#u=http%3A//www.medicalartshenderson.com&w=767&h=1024&a=22&s=1

Google Nexus 7
http://quirktools.com/screenfly/#u=http%3A//www.medicalartshenderson.com&w=604&h=965&a=23&s=1

The width of the first 2 links that i posted are over 700 (767 & 800). How can I get the website to be more responsive on the larger mobile devices like the ipad and kindle fire?

Thanks,
Jeannie

August 25, 2016 at 3:30 pm #677560
Yigit
Keymaster
Hey honestgraphics!

Please add following code to Quick CSS in Enfold theme options under General Styling tab
```
@media only screen and (max-width: 990px) and (min-width: 767px) {
.flex_column {
    width: 100%!important;
    margin-left: 0!important;
}
h2.avia-caption-title {
    font-size: 40px!important;
}}
```
Cheers!
Yigit
August 25, 2016 at 3:40 pm #677574

honestgraphics
Participant

Hi Yigit,

Thanks for your quick response!

I did this and it is has still not fixed it.

1. the footer is showing up as 4 columns wide instead of stacked
2. the icons are showing up as 3 across instead of stacked
3. the staff information is not stacked either
4. the prescription filled fast while you wait section font and icons does not all show up in the screen

That is only me going through part of the home page…

Thanks,
Jeannie

August 25, 2016 at 3:51 pm #677587
Yigit
Keymaster
Hey Jeannie,

Can you please try changing the code to following one
```
@media only screen and (max-width: 1024px) and (min-width: 767px) {
.flex_column {
    width: 100%!important;
    margin-left: 0!important;
}
h2.avia-caption-title {
    font-size: 40px!important;
}}
```
Then Please flush browser cache and refresh your page a few times – http://wiki.scratch.mit.edu/wiki/Hard_Refresh

Best regards,
Yigit
August 25, 2016 at 4:07 pm #677606

honestgraphics
Participant

It appears that that fixed it! Thanks! Is there a way to choose how images show up on mobile devices? On the home screne for instance, the spanish speaking speaking text shows up with shoes on the background for mobilie devices. I’d really like to fix this too.

Thanks again!!
Jeannie

August 29, 2016 at 2:45 pm #678930

Yigit
Keymaster

Hi,

Please refer to this post – http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/ and display different elements on mobile and on desktop

Best regards,
Yigit
Author

Posts

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

You must be logged in to reply to this topic.