Slideshow messed up on mobile

  • Author
    Posts
  • #1814457

    jpiller3
    Member

    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.

    #1814493

    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.

The topic ‘Slideshow messed up on mobile’ is closed to new replies.