Mobile Theme CSS Customization

• 

  vlogazul · Member · Dec 3, 2014 at 8:00 am

  • Copy link
  • Add topic to favorites

  Hello, I am using the forever theme and I would like to know if there’s a solution for the following.

  I am using plenty of CSS codes that work perfectly on any computer or IPad but when I check the website on a phone and click the view full site feature the website looks as if I was using the regular forever theme without any of those CSS codes and doesn’t look identical to the computer or iPad. Is there a reason or code to make the mobile full version look identical as the computer version?

  The blog I need help with is: (visible only to logged in users)

• 

  staff-happychia · Staff · Dec 3, 2014 at 8:26 am

  • Copy link

  Did you select the Include this CSS in the Mobile Theme checkbox that appears at the bottom of the CSS panel on the Customizer?

• 

  vlogazul · Member · Dec 3, 2014 at 8:05 pm

  • Copy link

  I already selected that option and its still the same thing.

• 

  thesacredpath · Member · Dec 4, 2014 at 2:20 am

  • Copy link

  @vlogazul, at Appearance > Mobile, you have the mobile theme activated. There are only certain customizations that go over to the mobile theme when you choose to “include this CSS in the Mobile Theme. The mobile theme is designed as a stand-alone theme for touch devices. Since theme CSS is theme specific, then there would have to be a separate mobile theme designed for each theme.

  Responsive designed themes are the answer to this and are designed to work on touch devices (phones and tablets) as well as desktop systems, but Forever is not a Responsive design, it is a fixed width design.

  If you wish the mobile designed theme to look like your website does on a desktop/laptop, you are going to have to create separate CSS for the mobile theme (since it uses different CSS selectors).

  Each mobile related CSS rule you create will have to be prefaced with the .mobile-theme CSS body class so that it will be applied to the mobile theme only, such as this example:

  .mobile-theme .entry-title {
  font-size: 2rem;
  }