#132005 Mobile Formatting Issues

Landing Forums Jupiter WordPress Theme Mobile Formatting Issues

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • Jason Cathcart

    Hi There,

    We have a few pages that are having some weird formatting issues on mobile devices that I can’t quite figure out.

    https://newzones.com/ – the header slider is not shrinking down to a proper responsive size. There is also an “Artists” and “Call” button showing up under the slider on mobile that were never there before. Not sure where they’ve come from or how to eliminate them

    https://newzones.com/contact/ – this page doesn’t load the menu header that’s on every single other page in the site. Instead we get three large buttons – Call, Email, and Directions.

    https://newzones.com/artists-all/ – on mobile this should be two columns of images and names. Every column is set the same as far as I can tell, but something weird is happening around the John Folsom / Jonathan Forrest images as well as the Don Pollack / David Robinson images.

    As I mentioned – these issues only exist on mobile devices. They all look normal on desktop devices.

    Nodari Support Team

    Hi Jason

    1. please check again, I set paddings to 0 in row and columns setting, also this css in the page css setting:

    #theme-page .theme-page-wrapper.full-width-layout {
    margin: 0px;
    }

    those buttons are in the page editor at the bottom, please checl,

    2. You are manually hiding the header from the mobile by this CSS code, please remove it: https://prnt.sc/1tfjn25

    3. can you please share the screenshot of this issue?

    Thanks

    Jason Cathcart

    Hi Nodari,

    1 – I’m still not seeing the slider shrink down as I would expect on the home page. And for some reason it is now aligned left instead of centered on desktop.

    I found those buttons, and removed them. However in doing so, I now see none of the homepage content other than the slider on mobile.

    2 – I don’t see that css code in the page custom CSS or in the theme customizer CSS box. Where else might it exist?

    3 – Screenshot attached. This issue happens at that line as well as further down around Don Pollack and David Robinson.

    Nodari Support Team

    Hi Jason

    1. Sorry, I saw it now, that happens because of 2 problems, you are using slider shortcodes in the text block which added some extra divs around the slider, instead of this try to use the Slider revolution element of the page builder. In order to have will width slider you need to change the slider setting from auto to Full width: https://prnt.sc/1twkcyn if you want not full width slider simply add some paddings or margins to your row or columns

    Page content – Looks like you already fixed it? https://prnt.sc/1twkojn

    2. Sorry, I was not able to find it as well, but I fixed this problem by adding this css code:

    @media (min-width: 768px) and (max-width: 1024px){
    .page-id-17 .mk-header {
        display: block !important;
    }
    }

    in the page css setting

    3. Got it, please check again, I just moved that column (Don Pollack) at the first position in the row and it fixed the problem

    Regards

    Jason Cathcart

    We’re getting there.

    1. I believe I’ve fixed the slider issue now
    2. I’m not seeing any changes to the contact page – the large buttons still show up and the header is still missing.
    3. I don’t see any text on my mobile devices – just a big white area where the text should be. Screen shot attached. I’ve checked the visibility settings and it should be visible for all devices?
    Nodari Support Team

    Hi Jason

    1. Cool 😀
    2. Sorry, you are right, I forgot something there and now I fixed, please verify
    3. what about the third question “two columns of images and names” ?

    “I don’t see any text on my mobile devices” – Yes, it was set to be invisible from small screen devices: https://prnt.sc/1u1su3a I changed it, and now it’s visible

    Regards

    Jason Cathcart

    Hi Nodari,

    I think we’ve cleared up all the issues now, thanks!

    Jason Cathcart

    Okay it seems we still have a couple issues coming up out of nowhere.

    On this page – https://newzones.com/contact/ – in the footer the phone number, email address, and “Subscribe to our mailing list” text are much larger than anywhere else on the site. It’s all the same footer widgets, so I’m unsure as to why.

    On this page – https://newzones.com/artists-all/ – we’re still seeing some artists move to single lines on some mobile devices. In particular we’re noticing that the pieces associated with Catherine Perehudoff and Rebecca Perehudoff are showing on their own lines on the new iPhone SE model. I’m personally unable to replicate the issue on my Samsung S20.

    On the home page – https://newzones.com/ – the text seems wider than the screen, so when you scroll down you’re also able to scroll slightly left and right. I can’t see any width setting that should be making it wider than the screen.

    Jason Cathcart

    Sorry – two more issues.

    On https://newzones.com/contact/ the text in the navigation menu is also much larger than anywhere else.

    and on https://newzones.com/ I had to replace the buttons that were removed previously, but they don’t appear to have the same styling as the buttons on the contact page. These buttons only appear on mobile.

    Mohsin Al-Rabieai Support Team

    Hi Jason,

    1 – On this page – https://newzones.com/contact/ – in the footer the phone number, email address, and “Subscribe to our mailing list” text are much larger than anywhere else on the site. It’s all the same footer widgets, so I’m unsure as to why.

    You have this CSS applied somewhere that is causing larger sizes of the texts and links on that page footer:

    body.page-id-17, body.page-id-17 a, body.page-id-17 p {
        color: #000;
        line-height: 29px;
        font-size: 18px;
    }

    This is telling the browser to set every element on the page with ID 17 to have 18px font size unless you override it another place.

    You also have added this CSS fix:

    #mk-footer p {
        font-weight: 500!important;
        font-size: 15px!important;
    }

    Which will force the paragraphs (and not the widget titles) font size to become 15px and be bold.

    So, this is all a CSS conflict. Maybe it’s better to change the above CSS fix to this:

    #mk-footer p, #mk-footer a{
        font-weight: 500!important;
        font-size: 15px!important;
    }

    to resolve the issue.

    2 – On this page – https://newzones.com/artists-all/ – we’re still seeing some artists move to single lines on some mobile devices. In particular we’re noticing that the pieces associated with Catherine Perehudoff and Rebecca Perehudoff are showing on their own lines on the new iPhone SE model. I’m personally unable to replicate the issue on my Samsung S20.

    Sorry I don’t get it. What is wrong with this? Please check my screenshot. If you can provide an image and point the issue on it, would be a great help.

    3 – On the home page – https://newzones.com/ – the text seems wider than the screen, so when you scroll down you’re also able to scroll slightly left and right. I can’t see any width setting that should be making it wider than the screen.

    You have added this CSS fix on your homepage which was causing this issue:

    #theme-page .theme-page-wrapper.full-width-layout {
        margin: 0px !important;
    }

    I removed it and the issue is now resolved.

    4 – On https://newzones.com/contact/ the text in the navigation menu is also much larger than anywhere else.
    You have set the size of the navigation menu to 18px in the Jupiter theme options. I don’t see any difference here on this page with any other navigation menu on other pages. If you are seeing it on a specific device, please point it over a screenshot.

    5 – and on https://newzones.com/ I had to replace the buttons that were removed previously, but they don’t appear to have the same styling as the buttons on the contact page. These buttons only appear on mobile.

    You have added these styles to your contact page buttons (which is a wrong practice by the way):

    @media (max-width: 767px) {
        .page-id-15864 .mk-button, .page-id-17 .mk-button {
            border-color: #979797 !important;
            border-radius: 30px !important;
            text-transform: uppercase;
        }
    }
    body.page-id-17, body.page-id-17 a, body.page-id-17 p {
        color: #000;
        line-height: 29px;
        font-size: 18px;
    }
    

    They simply won’t work on the homepage because the ID of the page is different.

    In general, all of your issues are related to the custom CSS applied to your web pages. Please note that the support for this theme goes with the items that are not working or have issues, not third-party customizations like this. You may need to contact your developer or in case you need customizations, hire someone from WPDone as an assistant:

    https://wpdone.artbees.net/

    Thanks for your understanding. Best regards

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