Slideshow not resizing, text not wrapping correctly for mobile

jpiller3 · Member · May 5, 2014 at 3:12 pm
Copy link

Add topic to favorites
I need help with the home page on successcomputerconsulting.com. It is perfect for web, but I’m having some issues for mobile and I hope you can help!

Each of these items refers to the home page on mobile:

1. The slideshow is stretching vertically.

2. I used div tags to create a section with three columns (right under the slideshow). The third column is bumping below the first two.

3. The text is not wrapping correctly in the “Be the Spark of Success” and “Easy, Affordable, Fast” sections.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · May 6, 2014 at 3:10 am
Copy link
1. If you look at the Basis Demo site, the main page is using the “Product” page template rather than The Default page template. The three sections below the main image are very quickly and easily built, right in the page when set to use the Product page template.

2. If you use the Product Page Template, the three columns will work correctly and when the browser/screen starts to get too narrow, it flows down to a single column to maintain maximum content readability for your visitors on small tablets and phones.

3. I would suggest creating a home page using the “Product” page template just to play with to see the advantages. Using divs within pages or posts on a responsive width theme such as Basis means you have to follow the conventions of a responsive width theme. You have the widths for the divs such as “Be the Spark…” set with a fixed width, and what you have to do is instead set either with percentages, or use a max-width and min-width. Many times you will set a width of 100% and then set a max-width with a fixed value, such as 350px.

When using divs within posts, you also have to be aware of the media query break points where the theme rearranges or restyles things for smaller screens, and in some themes that may mean three break points, and in some that might mean six break points.

Explore the Product template.
jpiller3 · Member · May 6, 2014 at 3:24 pm
Copy link
I created a new page using the Product Template and that fixed almost everything, but I think my custom CSS is still messing with the slideshow because it is still stretched vertically.

Here’s what I currently have in my CSS file:
```
.slideshow-window {
	border: medium none !important;
	background: #FFFFFF !important;
}

.slideshow-slide, .banner {
	background: #FFFFFF;
}

.slideshow-slide img {
	width: 100%;
	height: 100%;
}
```
thesacredpath · Member · May 8, 2014 at 12:11 am
Copy link
I’m not sure what is causing the slideshow not to resize. I’m waiting on word back from one of my colleagues to see if perhaps I’ve just missed something.
thesacredpath · Member · May 8, 2014 at 6:05 pm
Copy link
Alright, first off, remove this from your custom CSS and save.
```
.slideshow-slide img {
	width: 100%;
	height: 100%;
}
```
On the slideshow, it will not resize on browser narrowing. If you narrow the browser window down, you have to refresh the page and then the slideshow code will recalculate things and the slideshow will show at the maximum width for that particular window setting.
thesacredpath · Member · May 8, 2014 at 6:14 pm
Copy link
If you remove that, I’ll take a look at your site on phone and tablet to see what can be done to maximize the size of the slideshow using media queries.

If someone goes to your site and switches from landscape to portrait orientation, or the other way around though, they will still have to refresh to get the slideshow to look proper.
jpiller3 · Member · May 8, 2014 at 6:19 pm
Copy link
Did it! The slideshow is not stretched now, but it almost looks like it is taking up the same amount of vertical space (which is now just white space).
thesacredpath · Member · May 9, 2014 at 4:19 pm
Copy link
Yes, it is taking up the same vertical space as on a desktop monitor. I’ll work on some media queries to lessen that spacing for smaller devices and post them for you today.
thesacredpath · Member · May 9, 2014 at 4:43 pm
Copy link
The following hit the major screen sizes where I thought it needed adjustment. Above 768px in width, it seems pretty good. Since I’m working with my browser web inspector tool, I lose my change when I refresh the page, so you will likely need to play with the heights.
```
@media screen and (max-width: 768px) {
    .slideshow-window {
        height: 360px !important;
    }
}

@media screen and (max-width: 600px) {
    .slideshow-window {
        height: 290px !important;
    }
}

@media screen and (max-width: 480px) {
    .slideshow-window {
        height: 270px !important;
    }
}
```
jpiller3 · Member · May 9, 2014 at 4:56 pm
Copy link
That worked to eliminate the white space below the slideshow, but not the white space above it. Any ideas on how to fix that? We’re getting close!
thesacredpath · Member · May 9, 2014 at 5:02 pm
Copy link
Oh, they are tricky. The also have a line height set. Add the following rule to each of the media queries and adjust the line height to match the height set in the .slideshow-window rule.
```
.slideshow-slide {
    line-height: 290px !important;
}
```
jpiller3 · Member · May 9, 2014 at 5:22 pm
Copy link
I had to mess with the heights a little bit, but it worked! Thank you so, so much for all your help on this!
thesacredpath · Member · May 9, 2014 at 7:06 pm
Copy link
You are welcome.

No items found.