Cerauno Theme: Mobile version help

kathflores23 · Member · Jun 13, 2015 at 12:48 am
Copy link

Add topic to favorites
Good day everyone!
I would like to know how to make cerauno theme look exactly as it is in the desktop computer and in the mobile devices. I checked mobile friendly but it looks off. Thank you in advance for your help .

The blog I need help with is: (visible only to logged in users)
kathrynwp · Staff · Jun 15, 2015 at 3:48 pm
Copy link
Cerano is a responsive theme, so it’s designed to adjust automatically to display well on devices of all sizes, from desktop through laptops, tablets, and phones.

If you let me know specifically what looks “off” I’d be glad to have a further look.
kathflores23 · Member · Jun 21, 2015 at 9:18 pm
Copy link
Thank you for your response. It does not look the same as in desktop and in mobile and it is not showing content , ex. iphone
kathflores23 · Member · Jun 21, 2015 at 9:56 pm
Copy link
and I would also appreciate if you can help me how to remove the white line in between my main menu, header , content area and the bottom of the page . I temporarily changed the BG to a lighter color , if I use a dark BG it would show the white line.

Thank you so much.
kathrynwp · Staff · Jun 22, 2015 at 1:21 pm
Copy link
Thank you for your response. It does not look the same as in desktop and in mobile and it is not showing content , ex. iphone

Responsive themes don’t look the same on every device – they adapt automatically to different screen sizes, and there may be differences in the display on different devices. For example, on your site’s homepage, the widgets are displayed below your posts at phone size, instead of in a sidebar.

You can learn more about different theme layouts here:
http://en.support.wordpress.com/themes/theme-layouts/

Could you please give me an example of content that’s missing on iPhone so I can investigate?
kathrynwp · Staff · Jun 22, 2015 at 1:35 pm
Copy link
and I would also appreciate if you can help me how to remove the white line in between my main menu, header , content area and the bottom of the page

This should remove those three horizontal lines:
```
.main-navigation {
     border-bottom: none;
}
.site-footer .site-info, .site-content {
     border-top: none;
}
```
kathflores23 · Member · Jun 24, 2015 at 4:37 am
Copy link
Thank you.. the content now shows but it looked like it was squeezed..
kathrynwp · Staff · Jun 24, 2015 at 2:21 pm
Copy link
You’ve added 50 pixels of space to the right and left of the body, I think that’s why it appears “squeezed” on smaller devices:
```
body {
    border: 0 none;
    margin-bottom: 0;
    padding: 0 50px;
}
```
You can either remove the padding line altogether, or put it in a media query so it only affects larger devices. For example, this would restrict the change to screens larger than 1100px wide.
```
@media screen and (min-width: 1100px) {
  body {
      border: 0 none;
      margin-bottom: 0;
      padding: 0 50px;
  }
}
```
You can learn more about using media queries that target certain screen sizes here:

http://en.support.wordpress.com/custom-design/custom-css-media-queries/

Media Queries for Standard Devices

Responsive Design with CSS3 Media Queries
caffeeauthor · Member · Jul 23, 2015 at 7:30 pm
Copy link
I’m also getting reports of issues with the theme and Apple products (iPhone/ iPad) – the menus are not dropping down properly, according to the reports I’ve gotten back from a couple of viewers.

The site in question is: https://pukahworks.wordpress.com/
kathrynwp · Staff · Jul 23, 2015 at 8:07 pm
Copy link
caffeeauthor – I’m seeing an issue reaching submenu items on iPad using the full menu and will report that to our developers so they can have a look. We’ll keep you posted here.

I’m not seeing any issues on iPhone using the mobile menu, so if you can confirm what specific iPhone device/orientation/browser/iOS version users are having trouble with, that would be helpful. Thanks.
caffeeauthor · Member · Jul 23, 2015 at 8:19 pm
Copy link
Thank you so much kathrynwp for checking. I wasn’t sure if it was something I had missed in the set up process for the theme, or if there was something a little deeper causing it.

I’m sending one of the ladies who brought this to my attention over here to post the information you’re asking about for the iPhone.
madelainebauman · Member · Jul 23, 2015 at 8:39 pm
Copy link
Checking out caffeeauthor’s site, I noticed problems with the sub-menus. I couldn’t pull them down to check other pages.

The device I was using to access the site was:
Apple Ipad Mini
iOS Version 8.4
Safari browser.

Both the landscape and portrait orientations have this same problem with sub-menu access.
kathrynwp · Staff · Jul 24, 2015 at 2:17 pm
Copy link
madelainebauman – thanks for confirming the issue is with iPad, and not iPhone.

I’m going to have our developers take a look and we’ll keep this thread updated.
caffeeauthor · Member · Jul 24, 2015 at 2:28 pm
Copy link
Thank you for looking into this so quickly.
iamtakashi · Staff · Jul 31, 2015 at 4:08 pm
Copy link
Hi there,

The dropdown issue on touch devices have been fixed now.
Thanks for bringing this to our attention. Please let me know if you need further assistance.

Thanks.
caffeeauthor · Member · Jul 31, 2015 at 4:22 pm
Copy link
Thank you so much for the fast fix. I think that is the only issue I’ve run into.
kathflores23 · Member · Aug 3, 2015 at 4:04 am
Copy link
For the padding, it looks off on iphone mobile/ipad when I turn on padding settings. I am trying to center the content, it looks fine on desktop but on mobile display its out of place. Any advice on this? Thank you.
kathrynwp · Staff · Aug 3, 2015 at 12:41 pm
Copy link
kathflores23 – could you clarify what you mean by turning on padding settings? Is this the site you’re referring to? http://kathness.com/

No items found.