How To Make Site Mobile Display Same As In Theme Demo?

Hello Barbara,

Please take a look here first – https://appfinite.com/topic/forum-rules/ They have a “One Question Per Thread” policy. It makes the forum more organized when searching for particular topics…..and it also makes it easier for other forum members to read and respond (people may skip over long posts).

We can handle the first question here –

I’ve taken a look at your site, but I’m not seeing an issue with the widgets. Everything is showing up the way it’s supposed to for me. I’m using an iPhone 5, and I viewed your site in portrait and landscape mode.

They’re not supposed to be horizontal when viewed in portrait mode. They are supposed to be vertical because the space is too narrow and small to display three widgets horizontally. Does that make sense?

When you turn your phone to the side in landscape mode, then it adjusts horizontally since there is more space. That’s the way its designed to be, and the preferred way of viewing content in such a small space.

You can adjust this if you still want to show all 3 horizontally instead of vertical and you can do so by editing the code in the responsive section for the iPhone.

I’m sorry Barbara but I think you may be misunderstanding what I’m trying to explain. Please keep in mind, I’m trying to help you here 🙂

There are no issues that need to be fixed in this situation, everything is working fine as it’s supposed to be. The way mobile responsive design works is the code/content and images are supposed to adjust with the browser. As the browser gets narrow the images and content stack on top of each other instead of being side to side….since there isn’t enough space to show all of this. As I mentioned before, you can easily change this if you want….This is the way most people (including StudioPress/Genesis) set up their content and images to respond.

Again, everything is working fine as it should so there’s no reason for Wes to post any code snippets to fix anything, since there’s no actual issue to fix. However, if you want to make a customization to have it appear differently, you can. Just ask.

Also keep in mind, that the iphone simulator you’re using is not the same as using an actual mobile browser….they both render totally differently. I’m looking at your site from an actual iPhone and it behaves exactly in the way that its supposed to. In other words: It works.

Hope this helps.

I’ll chime in here if you all don’t mind….

but the theme demo and your site is showing up correctly for me as well.

I think what @scooby is trying to explain to you is when the browser is at a certain size (small) the theme is designed to show images and content VERTICALLY. The content and images will show VERTICALLY (UP & DOWN) when viewed on any iPhone in PORTRAIT mode. That means holding the phone vertically.

When you turn your phone to the side in LANDSCAPE mode (horizontal – side to side) the theme is designed to show the 3 widgets you are referring to HORIZONTALLY. Your site and the demo shows the EXACT same thing for me and I’m also using an iPhone.

Not to pick any sides, but @scooby is right. The theme demo is not showing you something you can’t do. Keep in mind, you LITERALLY have the exact same theme as what is shown on the demo. I’m only mentioning this because you made it seem as if Wes is showing a demo of something different than what he’s selling. Which simply isn’t true since your theme is the exact same theme as what is displayed in the demo.

I’ve also tested your site and the demo on 2 android phones and they ALL show everything correctly. Again, your theme shows up the same way as the demo. I went a step further and took a screenshot of your site on my iPhone and uploaded it for you to see – http://i.imgur.com/FON0Onk.png

Turn your phone upright and view both the demo and your site…..then turn it to the side and view them both again……you’ll see that they both function the exact same. As he (or she) already mentioned, you can adjust this to look however you want it to. It’s the responsive CSS that controls all of this. You can adjust this in the responsive section of the css (at the bottom).

Which iPhone are you using btw?

Yes that image is just an image he created in Photoshop to add as a SAMPLE. It’s not a screenshot from an actual iPhone or anything. it’s just a sample demo image. I assumed you already knew that since there are other sample images like the iPhone/iPad sample text, etc. I wouldn’t go based on demo images, developers create them just to fill things out….or to show you what you CAN do if you wanted to. The point of that image was to show that it is mobile responsive….I’m guessing he chose that image because it wouldn’t look good showing the icons vertically on a SAMPLE image….

But like I said before, you can easily make your site look like that if you want….you’d just have to edit the welcome area in your responsive css. You should be able to look around line 4006 in the responsive section and remove the width –

.welcome-feature-1, 
.welcome-feature-2, 
.welcome-feature-3 {
    margin: 0 auto;
    width: 100%;
} 

By removing that width it will automatically use the width from the other responsive section and should allow it to show up with 3 in a row (just like when your phone is horizontal).

Let us know if that works for you.