Disabling Mobile View
Support Area › Forums › Forward › Disabling Mobile View
- This topic has 8 replies, 2 voices, and was last updated 7 years, 8 months ago by Allison Deerr.
-
AuthorPosts
-
July 11, 2016 at 17:26 #37315Allison DeerrParticipant
Hi Bill,
Is there a way to turn off/disable mobile view for this theme? In mobile view, the text boxes on the homepage slider are very large in comparison to the photos and the map is displaying vertically. I’m also having issues with the way the timeline on the “About” page displays and the text running into each other on the “Partner” page.
Thanks in advance!
Allison
July 11, 2016 at 18:15 #37316Bill RobbinsModeratorHI Allison,
I would suggest making changes to the mobile. Full width websites are pretty bad on small phones in particular.
You can make the slier text smaller at smaller screen sizes. It’s a bit of a cruel twist that full width, rectangular images typically end up smaller than smaller rectangles or squares as the screen size shrinks. That’s part of what’s going on here. I’m going to post some CSS that you can use to adjust things. It’s inside various media queries so they only apply at the pixel width of the browser. Feel free to adjust the media query sizes to catch different sized browsers/screens.
Slider Text
@media only screen and (max-width: 767px) { div.slide-box.caption { padding: 10px; } h2.slide-title { font-size: 18px; } div.slide-box p { font-size: 12px; margin-bottom: 14px; } }
Contact Map
Realistically there isn’t enough room to keep the map beside the times and address in the contact widget, but you can control how tall it is with this:
@media only screen and (max-width: 767px) { .contact-map iframe{ height: 250px !important; } }
Sponsors
You can change the list so that is only two wide at smaller sizes:
@media only screen and (max-width: 767px) { .sponsor-list article.sponsor { width: 46%; margin-right: 2%; margin-left: 2%; min-height: 0; } .sponsor-list article.sponsor:nth-child(odd) { clear: both; } h2.sponsor-title { font-size: 18px; } }
Timeline
The timeline looks great. But it does not appear that is made to be responsive (adapt to screen size). The width appears to be fixed in the code. For it there are a few different options. You can let it spill outside of its container as it presently does. Users will have to do a bit of horizontal scrolling. You could also hide it at smaller screen sizes. I’m not a big fan of either of those options.
The last one would be to make that timeline responsive. It would likely require a bit of rearranging and resizing of items at smaller browser window sizes, but typically that can be done.
You can add the custom CSS to either the Advanced section of the WordPress customizer or to a child theme.
Hope that gives you some ideas to work with there.
Take care,
BillJuly 20, 2016 at 09:57 #37355Allison DeerrParticipantHi Bill,
Thanks for your help and apologies for the delay in getting back to you! The slider, map and sponsors now look much better on mobile, however, I’m still working on timeline. I was going to try making the images smaller to see if that helps, but if not, I may have to hide it on mobile devices. If you have any suggestions, please feel free to let me know, otherwise I will try reaching out to the timeline developer to see if they can offer any support. In hindsight, I probably should have went with a vertical timeline but I really liked the look of this one.
Many thanks,
AllisonJuly 20, 2016 at 10:00 #37356Bill RobbinsModeratorHey Allison,
Hopefully the developer can make the horizontal timeline responsive for you. That would give you the best results. It is a nice timeline so hiding it on mobile would not be ideal.
If you need help, let me know,
BillJuly 20, 2016 at 17:17 #37358Allison DeerrParticipantHi Bill,
I haven’t found a solution for the timeline yet, but in the meantime, I noticed that the image within the Facebook widget is spilling over the edge in mobile view.
Thanks,
AllisonJuly 21, 2016 at 14:27 #37368Bill RobbinsModeratorHey Allison,
Is there a way to see the site so I can see the widget in question?
Bill
July 21, 2016 at 17:36 #37370Allison DeerrParticipantAh, sorry. I forgot I had it password protected. You should be able to see the site now using the URL above. Thanks!
Allison
July 21, 2016 at 17:51 #37371Bill RobbinsModeratorYou can try adding this to your custom CSS:
.organizedthemes-facebook { overflow: hidden; }
Take care
July 22, 2016 at 15:24 #37372Allison DeerrParticipantThanks, that worked!
Allison
-
AuthorPosts
- The topic ‘Disabling Mobile View’ is closed to new replies.