Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • July 24, 2016 at 2:22 pm #664357
    EverydayAlternative

    Hi!

    I’ve noticed that the example tablet view on the customise page is different to what I am actually seeing when using my tablet. The customise page shows the smartphone version of the logo and header menus (which I don’t want). When I view the page on my tablet, it is appearing correctly.

    Is this just due to the different device screen sizes or is there is a fix for this? I’ve tried clearing the cache but this didn’t help.

    Thanks for you help!

    Nicole

    July 24, 2016 at 2:57 pm #664369
    Vinay

    Hey EverydayAlternative,

    What you are viewing is correct. On the landscape the screen width is greater than portrait mode hence the layout changes accordingly to fill in the screen.

    Let us know if you have any questions.

    Best regards,
    Vinay

    July 24, 2016 at 3:10 pm #664376
    EverydayAlternative

    Hey Vinay

    Thanks for the speedy response!

    I’ve included two screen captures of what I can see on my tablet. The screen captures are both on the same page: the first is portrait view and the second is landscape. The problem is both orientations look different from the customise page. What is being displayed on the tablet is correct. I’m just not sure why it doesn’t look the same in the customise view?

    Thanks for your help!

    Nicole

    July 27, 2016 at 2:40 am #665558
    Ismael

    Hi,

    Are you referring to the section below the slider? They are not visible in portrait mode because of the following css code:

    @media only screen and (max-width: 990px) {
.only-desktop {
    display: none !important;
}
}

    Best regards,
    Ismael

    July 27, 2016 at 6:26 am #665610
    EverydayAlternative

    Hey Ismael

    No sorry, that’s not the issue. What I can see on my actual tablet is different from what is displayed on the customise page. For example:
    The logo displayed on the customise page is the logo I have set to be displayed on smartphones only via:
    @media only screen and (max-width: 767px) {
    .logo img { opacity: 0; }
    .logo a { background-image: url(http://…link to Mobile-Logo.png); background-repeat: no-repeat; background-size: contain; }}
    The logo displayed on my actual tablet in portrait mode is the one set in the theme options (which is what I want)

    The main menu displayed on the customise page is the header mobile menu even though I have this option set to “Activate only for Smartphones (browser width below 768px)”. But the menu displayed on my actual tablet in portrait mode is the normal header menu(which is what I want).

    The product slider displaying at the bottom of the page on the customise page is the one I have set to display on smartphones only via
    @media only screen and (min-width: 767px) {
    .only-mob { display: none !important; }}
    The product slider displaying on my actual tablet in portrait mode is the one I have set to display on all other devices via
    @media only screen and (max-width: 767px) {
    .not-mob { display: none !important; }}
    Which is what I want.

    I’m just not sure what I need to do to have the customise page reflect the settings above. Hope that all makes sense.

    Thanks for your help.

    Nicole

    July 29, 2016 at 3:16 am #666462
    Ismael

    Hi,

    If you want to target tablet screens, you have to adjust the css media query:

    /* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 989px) {
     /* custom style here */ 
}

    Best regards,
    Ismael

    July 29, 2016 at 1:17 pm #666563
    EverydayAlternative

    Hi Ismael

    Thanks for your reply. It’s not that I specifically want to target tablet screens. The problem is that the tablet view on the Customise screen is displaying items set for smartphone screen sizes only.

    But, when I look at my site on a tablet device, it displays correctly as per the CSS media queries I already have set.

    I did try adjusting the CSS media queries as per your previous post – unfortunately this seemed to make all elements appear on the desktop version regardless of the custom CSS class

    Thanks for your help.

    Nicole

    August 3, 2016 at 3:55 am #667908
    Ismael

    Hi,

    What do you mean by “Customise screen”? Adjust the min-width value to 768px:

    @media only screen and (min-width: 768px) {
.only-mob { display: none !important; }}

    Best regards,
    Ismael

    August 7, 2016 at 2:06 pm #669448
    EverydayAlternative

    Hi Ismael

    Thanks for your reply.

    Under the ‘Appearance’ menu on the WP dashboard, there is a ‘Customise’ page that allows you to see how your site display look on desktops, tablets and smartphones.

    I’ve tried adjusting the min width to 768px as you suggested but unfortunately this hasn’t resolved the problem.

    It’s not a big deal, I can keep using an actual tablet to check the display.

    Thanks for your help.

    Regards

    Nicole

    August 8, 2016 at 9:02 am #669689
    Rikard

    Hi Nicole,

    I think it’s a safer bet to either use an actual device or load the page normally and resize the browser size to check how it responds on different sizes.

    Regards,
    Rikard

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.