Need help? Check out our Support site, then


Slideshow messed up on mobile

  1. I cannot seem to figure out why the slideshow on my home page is showing up weird on mobile devices. Here is how it appears: http://successcomputerconsulting.files.wordpress.com/2014/05/photo-1.png

    I do have some custom CSS added for the slideshow, so I thought that might be the culprit. When I remove the CSS regarding the slideshow this is how it appears: http://successcomputerconsulting.files.wordpress.com/2014/05/photo-2.png

    I added the slideshow CSS back in since I need it for the desktop version of the site.

    Here is all the custom CSS I'm currently using on my site. I’m hoping someone here can help me figure out what is messing with the slideshow to make it look so weird!

    td {
    	text-align: left;
    }
    
    table {
    	border: 0;
    }
    
    table td {
    	border: 0;
    }
    
    .post-author a, .post-date {
    	display: none;
    }
    
    #footer {
    	background-color: #001F1F;
    }
    
    .footer-widgets {
    	color: #FFFFFF !important;
    }
    
    .footer-widgets a {
    	color: #005C5C;
    }
    
    .theme-byline {
    	color: #193535 !important;
    }
    
    .theme-byline a {
    	color: #193535 !important;
    }
    
    #basis-header-nav a {
    	font-size: 14px;
    }
    
    /*remove underline from active menu selection and change color*/
    #basis-header-nav .current-menu-item a {
    	color: #FF0000 !important;
    	text-decoration: none !important;
    }
    
    /*set menu hover color*/
    #basis-header-nav a:hover {
    	color: #FF0000 !important;
    }
    
    input {
    	background-color: #E0E0E0;
    	color: #000;
    	width: 100% !important;
    }
    
    .contact-form textarea {
    	background-color: #E0E0E0;
    	width: 100% !important;
    }
    
    .contact-submit .pushbutton-wide {
    	background-color: #FF0000;
    	border-radius: 5px;
    	color: #FFFFFF;
    	width: 20% !important;
    }
    
    a:link {
    	color: #FF0000;
    	text-decoration: none;
    }
    
    a:visited {
    	color: #FF0000;
    	text-decoration: none;
    }
    
    h2, h5 {
    	margin-top: 0;
    	margin-bottom: 10px;
    }
    
    h2 {
    	font-size: 225%;
    }
    
    #contact-form-widget-text-5 {
    	max-width: 50%;
    }
    
    #contact-form-widget-text-5 .pushbutton-wide {
    	width: 90px !important;
    	padding: .5rem;
    	background-color: #CC5200;
    }
    
    #page-311 div .alignleft {
    	margin-top: 25px;
    }
    
    ul li {
    	list-style-type: circle;
    }
    
    ul.a {
    	list-style-type: circle;
    }
    
    hr {
    	color: #f00;
    	background-color: #A0A0A0;
    	height: 1px;
    }
    
    @media screen and (min-width:800px) {
    	#basis-header-nav {
    		max-width: 80%;
    	}
    
    	#title {
    		max-width: 20%;
    	}
    }
    
    .post-content {
    	padding: .01rem 3.75rem;
    }
    
    .basis-list ul, .basis-list ol {
    	list-style-position: outside;
    	margin-left: 15px;
    }
    
    #basis-header-nav {
    	margin-top: 20px;
    	margin-bottom: -60px;
    }
    
    /* Responsive Google Calendar iFrame */
    .calendar-container {
    	position: relative;
    	padding-bottom: 75%;
    	height: 0;
    	overflow: hidden;
    }
    
    .calendar-container iframe {
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    }
    
    /* Mobile version of Google Calendar iFrame */
    @media all and (max-width: 480px) {
    	.calendar-container {
    		display: none;
    	}
    
    	.calendar-container-mobile {
    		display: block;
    	}
    }
    
    /* Everything else */
    @media all and (min-width: 481px) {
    	.calendar-container {
    		display: block;
    	}
    
    	.calendar-container-mobile {
    		display: none;
    	}
    }
    
    .slideshow-window {
    	border: medium none !important;
    	background: #FFFFFF !important;
    }
    
    .slideshow-slide, .banner {
    	background: #FFFFFF;
    }
    
    .slideshow-slide img {
    	width: 100%;
    	height: 100%;
    }

    The blog I need help with is successcomputerconsulting.com.

  2. I set up Basis in my test site using only the original CSS (no customizations) and it behaves exactly the same way yours does, so there is something in the theme itself.

    Since Basis is a premium theme, you have access to the theme designers and I suggest posting in the Basis Premium Theme Support forum to see what they say on this.

Topic Closed

This topic has been closed to new replies.

About this Topic