Help making a featured content slider responsive on mobile devices
-
Hi,
After looking WAY too long for a theme that would do what I wanted for new book support/consulting site, I finally settled on the Toujours theme (ironically developed for weddings). It has a slider at the top that you can use for featured content which is one of the things I like, but it does not display correctly on mobile devices (it is actually better on a phone than a tablet, but neither adapt properly).I ended up tweaking the pictures I used to try to center the content a little more so it isn’t cut off in the mobile view, but there has to be a better way. Even the disply on the PC view doesn’t seem just right (pictures seem enlarged).
I’ve done so much work on this already, I really don’t want to switch to another theme so I can probably live with it if I have to, But if anyone IS able to help, that would be great. I know NOTHING about CSS but I tried cutting and pasting some code someone gave me for another site. That actually seemed to do a little bit of something but still isn’t what it should be (it was for a header, not a slider).
Any help would be appreciated. The site is cindypowellhr.com.
Thank you!
The blog I need help with is: (visible only to logged in users)
-
Before diving into the CSS I’ve noticed that on the Toujours theme page it states:
Featured Images should be at least 1160 wide. If you’re using the Featured Content slideshow or displaying the three recent posts, they should be at least 655 tall.
I checked a couple of the images you’re using and they don’t appear to be that tall which might be why they’re looking weird and squished, especially when the slideshow is displayed on smaller screens.
Could you try including an image that meets the size specifications to see if that helps. Let me know when you’ve added one and I’ll check to back, there might be ways to improve the layout with CSS as well but the demo page looks OK even at smaller sizes.
-
I just changed the first one (the one that says HR Matters Now Available) and it looks the same on my phone and tablet (actually looks a little worse on the phone and I need to move some of the elements of the picture down). It looks like it is actually the theme banner (with the title of the post) that is making it appear weird in the other formats. Again, it’s not terrible, but it doesn’t look the same as when I view it on my computer.
The other problem is that I am very clearly out of my element with graphics and I’m just throwing stuff together in publisher. Hopefully soon I’ll be able to have someone with graphics knowledge (and programs) help me, but I need to get something up there sooner rather than later.
Thank you so much for your assistance!
-
The image ratio is always 2:1, twice as wide as it is tall. I can’t see anything going wrong with the image itself or the post title.
The image isn’t great quality to start with (not a criticism, just an observation – it’s pretty good if you’re using publisher!) and as it contains text that’s already condensed horizontally it will be even harder to see clearly when it’s reduced down to fit a mobile screen.
If you have a look at the Toujours demo page does the slider there also exhibit the same problems on mobile and tablet or is it just your site?
-
That was a great suggestion. I just took a look. I think what the problem boils down to (besides my not-so-great graphics) is that the whole title associated with the feature images isn’t displaying when I look at the site on my phone. The font in the demo seems to be much smaller. Maybe I changed it? I’ll play around with that. Also, it may just be that my titles are too long.
On my ipad it looks pretty similar, but again because the one in the demo has a smaller font and shorter title, the titles don’t stretch so far into the image.
I really like the fonts and sizes I’m using. Is there any code that would just shrink the title in the display?
Again, thanks for your help!
-
Hopefully this is an OK compromise just for mobiles, it shrinks the text a tiny bit and sometimes there’ll be some extra space if your title doesn’t break onto multiple lines but it makes sure all the text is displayed so none of the important stuff is missing:
@media screen and (max-width: 680px) { .slideshow .slide-info .slide-title a { white-space: normal; word-wrap: normal; font-size: 18px } } -
Thank you this works perfectly for the mobile – it displays the full title. That was my biggest issue. The tablet view still isn’t perfect, but it’s not terrible so I’m going to call it a win. It will work well at least until I can get some help with the graphics.
Thank you again for your time and input!
-
What’s the tablet issue? You say it’s not perfect but it’s hard to help if I’m not sure what you’re aiming for. Let me know if there’s anything more specific you have in mind.
-
Oh goodness I hate to keep bugging you! The issue on the tablet is that that shadow box (that holds the text) displays differently than it does on either a mobile or the computer. It is is too long relative to the images and in a couple of the images I’m using, it didn’t look that great because it bled over into the text in the image. I’ve edited the images and I think there is only one image it is still affecting at this point (the one for “customized HR services”). I made it better but I can’t get it right on all three views. If I make the image bigger and move the text more to the right, it looks good on the tablet, but the right end of the text is cut off on a full screen view. If I move it back to the left, it’s good on the full screen but then the text box (built into the theme) bleeds over into the text on my image. At this point it really is very close and I’m happy to leave it as is until I can get some better images, but if you happen to have a solution, that would be great too!
-
Oh goodness I hate to keep bugging you! The issue on the tablet is that that shadow box (that holds the text) displays differently than it does on either a mobile or the computer. It is is too long relative to the images and in a couple of the images I’m using, it didn’t look that great because it bled over into the text in the image. I’ve edited the images and I think there is only one image it is still affecting at this point (the one for “customized HR services”). I made it better but I can’t get it right on all three views. If I make the image bigger and move the text more to the right, it looks good on the tablet, but the right end of the text is cut off on a full screen view. If I move it back to the left, it’s good on the full screen but then the text box (built into the theme) bleeds over into the text on my image. At this point it really is very close and I’m happy to leave it as is until I can get some better images, but if you happen to have a solution, that would be great too!
-
The best thing I can suggest is making the box narrower and positioning it closer to the bottom of the image at the most common tablet sizes.
Copy this code in and feel free to change the width and lower spacing values if you think you can find something that works with all your images.
@media only screen and (max-width: 1024px) and (min-width: 680px) { .slide-info { max-width: 50%; } .slideshow .slide-info { bottom: 5px; } } -
- The topic ‘Help making a featured content slider responsive on mobile devices’ is closed to new replies.
WordPress.com Forums 