Disabling Mobile View

Support Area Forums Forward Disabling Mobile View

Viewing 9 posts - 1 through 9 (of 9 total)
URL to the page in question: http://beta.swedishamericanmuseum.org%20
  • Author
    Posts
  • #37315
    Allison Deerr
    Participant

    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

    #37316
    Bill Robbins
    Moderator

    HI 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,
    Bill

    #37355
    Allison Deerr
    Participant

    Hi 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,
    Allison

    #37356
    Bill Robbins
    Moderator

    Hey 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,
    Bill

    #37358
    Allison Deerr
    Participant

    Hi 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,
    Allison

    #37368
    Bill Robbins
    Moderator

    Hey Allison,

    Is there a way to see the site so I can see the widget in question?

    Bill

    #37370
    Allison Deerr
    Participant

    Ah, sorry. I forgot I had it password protected. You should be able to see the site now using the URL above. Thanks!

    Allison

    #37371
    Bill Robbins
    Moderator

    You can try adding this to your custom CSS:

    
    .organizedthemes-facebook {
    	overflow: hidden;
    }
    

    Take care

    #37372
    Allison Deerr
    Participant

    Thanks, that worked!

    Allison

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Disabling Mobile View’ is closed to new replies.