Unused text space in parallax section on mobile

Shapely
1

I’m using Shapely on a photography portfolio and blog page and I love it. Thanks for all the great work.

However, I’ve noticed some weird looking text on my front-page on the mobile view. The text is not spaced over the full width of the page and since I’m using pictures as well it’s a lot of space wasted (see attached screenshot for details). I’ve tested this on a mobile sized window in the desktop version of Safari and on several iPhones. I’m using the regular parallax section for front pages. Is there a way to let the text use the full width in the mobile view? Or any other idea how to fix that?

Another thing I’ve noticed is that the text of a button for a call to action widget I’m using to direct people to my blog is not centered in the small tablet view (iPad in portrait position). I’ve included a second screenshot to show what I mean. Any way to fix that as well?

My website is http://mirrorless-landscapes.de. Thanks for any help!

2

Hi,

Go to Appearance -> Customize -> Additional CSS, and add this Custom CSS in it,

@media only screen 
  and (max-width: 480px) {
.shapely_home_parallax div {
    width: 100%;
}
}
  1. Use this Custom CSS for that,
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px)  {
#shapely_home_cfa-2 .btn {
    min-width: auto;
}
}

If something isn’t working, you can check the media queries and adjust it according to your needs: Media Queries for Standard Devices | CSS-Tricks

Let us know,

Thanks,
laranz.

3

Thank you very much. That helped a lot. I was able to fix the “problem” on my devices and now I am about to fix it for some other devices with the link you’ve provided. Great!