Osclass Support Forums

Osclass theme support => Zara Osclass Responsive Theme => Topic started by: Виталий Василенко on December 07, 2016, 01:20:44 PM

Title: not to show the mobile version
Post by: Виталий Василенко on December 07, 2016, 01:20:44 PM

The header.php file
I put in function for the output h1 tag

The regular version all OK

I want to hide  h1 in the mobile version

tell me how to do it

print Screen http://prntscr.com/dgfcrq

Title: Re: not to show the mobile version
Post by: Виталий Василенко on December 07, 2016, 02:14:50 PM

Sorry for my bad english

Title: Re: not to show the mobile version
Post by: MB Themes on December 07, 2016, 02:28:31 PM

You can use different tools that help you customize mobile view of website, like:
http://responsivetest.net/#u=http://zara.mb-themes.com/|320|480|1 (http://responsivetest.net/#u=http://zara.mb-themes.com/|320|480|1)

Title: Re: not to show the mobile version
Post by: Виталий Василенко on December 07, 2016, 02:54:46 PM

How to view the mobile version I know
I want to hide  h1 in the mobile version

print Screen

Title: Re: not to show the mobile version
Post by: MB Themes on December 07, 2016, 03:11:35 PM

http://www.w3schools.com/css/css3_mediaqueries_ex.asp

Title: Re: not to show the mobile version
Post by: Carlos Carcamo on December 07, 2016, 05:56:43 PM

Hi,  resolve this using css

put this code at the end of your style.css


   .mobileHide { display: inline;}
   /* Smartphone Portrait and Landscape */
   @media only screen
   and (min-device-width : 320px)
   and (max-device-width : 480px){  .mobileHide { display: none;}}


A go to your header and replace add this

<h1 class="mobileHide">
TEXT OR IMAGE NOT FOR MOBILE HERE
</h1>

This is the tutorial that I follow

https://blog.hubspot.com/marketing/site-content-only-mobile-viewers-can-see-ht#sm.0001mb01u3izif0htag2o89athefz

Title: Re: not to show the mobile version
Post by: Виталий Василенко on December 08, 2016, 09:02:32 AM

Many thanks.

I did everything you said.

Does not work :-(

Please tell me why so

Title: Re: not to show the mobile version
Post by: Виталий Василенко on December 08, 2016, 09:05:31 AM

even print screen

Title: Re: not to show the mobile version
Post by: Виталий Василенко on December 08, 2016, 09:06:21 AM

and

Title: Re: not to show the mobile version
Post by: MB Themes on December 08, 2016, 09:44:36 AM

I think you should increase range of min and max width.

Title: Re: not to show the mobile version
Post by: Виталий Василенко on December 08, 2016, 09:47:56 AM

.mobileHide { display: inline;}
   /* Smartphone Portrait and Landscape */
   @media only screen
   and (min-device-width : 10px)
   and (max-device-width : 490px){  .mobileHide { display: none;}}

no effect

Title: Re: not to show the mobile version
Post by: Carlos Carcamo on December 08, 2016, 01:33:14 PM

Try with this:

<div class="mobileHide"><h1>text here</h1></div>

Remember to test with different types of codes, for example

 <center class="mobileHide"><h1>text here</h1></center>
 <ul class="mobileHide"><h1>text here</h1></ul>