New Landing › How can we help? › Themeforest Theme Support › Dante › Tablet View Issues

Viewing 15 posts - 1 through 15 (of 34 total)
1 2 3
  • Back to forum
    Posted in: Dante
  • December 18, 2015 at 10:57 pm #236613
    tsimarketing
    Member
    Post count: 267

    We turned responsive on for our website, and the desktop/mobile view look good, but the tablet view is all off. There are icon boxes that aren’t aligned right or aren’t showing all the information within them, there are quicklinks that are getting cut off and other things are happening. I have attached some screenshots of what I am talking about, these screenshots do not show all the things that are wrong just a few. I believe that some of the css code that we have for desktop view is messing with some stuff for tablet view. Our website is not currently responsive because we turned it off since it didn’t look right, but we do have a testing website that is responsive and you can see the issues I am referring to on that site. That site is tsihealthcare.com/test. Take a look at that website on tablet view and you should see what I am talking about. We would really like to fix these issues, so if you can tell me the best way to go about making tablet look good that would be great. Because like I said desktop view and mobile view look the way it should.

    Attachments:
    You must be logged in to view attached files.
    December 21, 2015 at 6:52 pm #236952
    David Martin – Support
    Moderator
    Post count: 20834

    Hi,

    What tablet device are you using? Can you clear your device cache, are you using a caching plugins on the site?

    Thanks,
    David.

    December 22, 2015 at 3:20 pm #237097
    tsimarketing
    Member
    Post count: 267

    We are using an iPad mini. I have cleared the cache and we are not currently using any cache plugins on our website. I believe the issue is being caused by some of the css coding that we have for our desktop that is translating on to our tablet view. So I’m thinking the only way to fix these certain issues will be to add css coding for tablet view.

    December 22, 2015 at 3:32 pm #237101
    David Martin – Support
    Moderator
    Post count: 20834

    What URL is each image specific to, your homepage looks normal,

    Thanks.

    December 23, 2015 at 7:46 pm #237287
    tsimarketing
    Member
    Post count: 267

    A few of the pages that are messing up are:

    tsihealthcare.com/test/rheumatology

    tsihealthcare.com/test/ehr

    tsihealthcare.com/test/addons

    These three pages have the most issues with icon boxes not looking right, or icon boxes being all the same height, etc.
    You can see these issues on the tablet view. Also my supervisor wants to sure that the tablet view looks the same on all tablet sizes. Such as the iPad, the iPad Mini, Samsung tablets, etc. Will the tablet view look the same across all those tablet devices?

    December 28, 2015 at 9:22 pm #237442
    tsimarketing
    Member
    Post count: 267

    I have figured out a solution for some of the issues that were happening. But there are a couple left that I still need help with. I have attached some screenshots to show you what I need help with. The number of the attachment will match the description of the issue below:

    1. On tablet view, when you turn the tablet sideways making it wider horizontal you see the fill navigation bar and header items. As you can see the client are button has been pushed down to the second line. Is there a css code I can use to make it so the client area button gets pushed back up to the same line as the rest just on tablet view?

    2. We have a couple icon boxes like these that the box ends before the text does. Is there a css code that can allow me to change the height of the box so all the text will fit within it only on tablet view?

    3. We also have some animated boxes that have text that get cut off when the box flips over. Is there a css code that can fix this issue on tablet view?

    Attachments:
    You must be logged in to view attached files.
    December 29, 2015 at 5:21 pm #237600
    David Martin – Support
    Moderator
    Post count: 20834

    Hi,

    Please test this:

    1) 

    @media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1)  { 
#header-section #header {
    padding: 15px;
}
}

    For 2) and 3) please supply a URL for both pages.

    Thanks.

    December 29, 2015 at 5:23 pm #237601
    tsimarketing
    Member
    Post count: 267

    Issue #2 URL: tsihealthcare.com/test/addons

    Issue #3 URL: tsihealthcare.com/test/ehr

    December 29, 2015 at 5:38 pm #237607
    David Martin – Support
    Moderator
    Post count: 20834

    Hi,

    2) You are already setting a height for those:

    .page-id-52 .sf-icon-box[class*="sf-icon-box-boxed-"] .sf-icon-box-content-wrap {
    height: 400px !important;
}

    You will need to overwrite that for your iPad mini, ex:

    @media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1)  {
.page-id-52 .sf-icon-box[class*="sf-icon-box-boxed-"] .sf-icon-box-content-wrap {
    height: 450px !important;
}
}

    3)

    You can test, resizing the font for iPad mini, ex:

    @media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1)  {
.sf-icon-box-content h4 span {
    font-size: 12px;
}
}

    Thanks,
    David.

    December 29, 2015 at 7:26 pm #237631
    tsimarketing
    Member
    Post count: 267

    I have put all these codes in my custom css, but none of them seem to be doing anything. Are there other css codes I could try?

    December 29, 2015 at 7:29 pm #237632
    David Martin – Support
    Moderator
    Post count: 20834

    The above codes are specific to the iPad mini,

    What device are you testing on?

    Thanks.

    December 29, 2015 at 7:50 pm #237637
    tsimarketing
    Member
    Post count: 267

    I am looking on my iPad mini. I do notice now that the third code you gave me that allowed me to change the font size is working. However it made the font size small in all icon boxes, is there something I can add to that code to make it only change the font size of the text in animated icon boxes?

    But the other two codes aren’t working. The client area button in the header above the navigation still isn’t on the same line as the rest of the stuff. And the other code to change the height of the icon boxes on that page isn’t working, the height isn’t getting any longer.

    December 29, 2015 at 7:55 pm #237639
    David Martin – Support
    Moderator
    Post count: 20834

    Can you create me a WP login, it’s quicker then going back & forth.

    Thanks.

    December 29, 2015 at 8:00 pm #237640
    tsimarketing
    Member
    Post count: 267
    This reply has been marked as private.
    December 30, 2015 at 8:23 pm #237758
    tsimarketing
    Member
    Post count: 267

    Were you able to get in with this login? Were you able to find any solutions?

  • Back to forum
    Posted in: Dante
Viewing 15 posts - 1 through 15 (of 34 total)
1 2 3

You must be logged in to reply to this topic.