Mobile-Responsive Issues

Support Area Forums Pneuma Mobile-Responsive Issues

This topic contains 7 replies, has 2 voices, and was last updated by  Bill Robbins 1 year, 8 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
URL to the page in question: http://kehilatyeshua.com
  • Author
    Posts
  • #34718

    Judy Rich
    Participant

    Hi there,

    I almost have my site ready, but a few things are giving me some trouble when loading on a mobile device.

    The biggest one is the home page. The top slide/image has text overlaying it which doesn’t line up well on a mobile device.
    Also, the logo is too small on mobile.

    Is there a way to override the standard site for these items when viewed on a mobile device?

    And the menu button on the top right isn’t responding. Not sure why…

    Thanks!
    – Judy

    #34740

    Bill Robbins
    Moderator

    Hi Judy,

    Let’s see if we can get your home page squared away so you’ll be good to go.

    The top row as it is, may be tricky to approach on a mobile device. Here’s what I would do there.

    1. Change the image just a bit and take out the black border at the top and bottom of the image. Also I would turn the Welcome to Kehilat portion of the image into a separate image file and I would add it to the text widget itself.
    2. Edit the row on your home page and under attributes, use the space for CSS to add a top and bottom border there like this:
      
      border-top: 10px solid #000;
      border-bottom: 10px solid #000;
      

      That way the border can expand as the content grows in height.

    3. Next edit the widget that has your content in it. In the attributes section there, add this to the CSS:
      
      background-color: rgba(255, 255, 255, 0.7);
      

      That will give the text widget a semi-transparent white background. On larger displays, no one will know it’s there, but on smaller screens, it will help the text to be visible if it overlays the portion of the photo where the people are.

    You might also consider aligning the image to the bottom. I believe that might work better for mobile too.


    I tried using the menu on my iPad and iPhone and it seemed to work as expected there. If you’re running into trouble, let me know what you’re seeing/not seeing and what device and version you’re seeing it on. That’ll help too.


    Looking at your logo, it looks like there is some empty space inside the actual image file. I would take that out as well. If you need to move the logo a bit from the edge of the header on larger screens we can do that via CSS. That way the graphic part of the image can be a large as possible which will help on mobile.

    Have a great week,
    Bill

    #34741

    Judy Rich
    Participant

    So, just to clarify, there’s no way to force the mobile version to load something different than the regular version?

    #34742

    Judy Rich
    Participant

    Okay, those fixes made the home page widget look better. As far as the logo goes, yes, I need it to be a bit farther from the left on larger devices. Can you explain how to set that?

    #34743

    Judy Rich
    Participant

    Also, I changed the home screen a bit to try to alter that first widget. As you can see, I changed it so that the two elements – the text and the image – sit side by side instead of the background image being under everything. That way they stack when on a mobile device. But now, I have a bunch of extra padding around the image (even though I have it set to 0px). Also, I want the image to shrink to fit smaller devices, and instead it is just showing part of the image that fits and cutting out the rest. Thoughts?

    #34756

    Bill Robbins
    Moderator

    Good Morning Judy,

    Let’s see what we can do here for you.

    Logo

    You can move it further to the right Here’s how to do that:

    1. Go to the Appearance section in your WordPress dashboard and click on Customize.
    2. Look down for the advanced section and click on it. Then choose Custom CSS.
    3. In the box there, add this:
      
      @media screen and (min-width: 768px) {
      
      	#logo {
      		margin-left: 50px;
      	}
      
      }
      
    4. Save your changes.

    First Widget

    Let’s do this to take out the padding in that row:

    1. Go to the Appearance section in your WordPress dashboard and click on Customize.
    2. Look down for the advanced section and click on it. Then choose Custom CSS.
    3. In the box there, add this:
      
      #pg-4-0 .section-content {
      	padding: 0;
      }
      
    4. Save your changes.

    I learned something creating the Mise En Place theme last month that will be rolled into Pneuma that should allow the row padding to work more predictably.

    See how that works out now.

    Thanks,
    Bill

    #34761

    Judy Rich
    Participant

    Thank You!!!!! Seriously. I have been so impressed by your support/service. Can’t wait to buy more themes from Organized Themes!

    – Judy

    #34764

    Bill Robbins
    Moderator

    Thanks Judy… I really do appreciate it 🙂

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Mobile-Responsive Issues’ is closed to new replies.