Responsive Issues on Canvas with Smart Slider, Canvas and Page Builder Responsiveness

Hello all

I am having the following issue as this thread, wasn't sure I was supposed to start a new topic or not.

Hello everyone, I am new here so please be kind :slight_smile:. I am having this exact same issue on my canvas site and I have been reading through the resolutions but am not 100% sure if they apply to me. Before I go and start playing I would love to have a professional take a look at this for me. I am now a wordpress expert and would rather not muck around where i don't belong. I signed up and I have the plugin installed on my site so I am ready to give access.

I have the site customized in a way I want so far by modifying the css but the responsive isn't working on the phones or other mobile devices. It works great on the desktop, I am almost positive it is something I am doing wrong.

Here is the link to the original thread
https://premium.wpmudev.org/forums/topic/responsive-issues-on-canvas-with-smart-slider-canvas-and-page-builder-responsiveness

  • Michael Bissett

    Hey @Dawn, glad to hear you're liking things here! :smiley:

    I just had a peek inside your site, and I noticed that inside of:

    Canvas -> Settings -> Layout

    The box for "Enable Fixed Mobile Layout" was checked. After unchecking that, I'm seeing that it's working for mobile devices right now.

    I had to add in this CSS code in order to correct the styling for both of the menus:

    body #top, body #header-container, body #footer-container, body #nav-container, body #footer-widgets-container {
      background-color: #fff;
    }
    
    @media only screen and (min-width: 768px) {
    
    nav#navigation {
        padding-top: 0;
    }
    
    }

    I inserted it into:

    Appearance -> Custom CSS

    Could you let me know how this all looks to you presently? :slight_smile:

    Please advise,
    Michael

  • Dawn

    Hi Michael

    I more than like it here, I am not sure why I didn't find you guys before. I intend to keep my subscription for sure, worth it's weight in gold.

    So the mobile looks good, or closer that is. I think there are some issues with the css others and myself did. Unfortunately we had too many cooks.

    So before I move into some other items I could use your advice on, actually first. THANK YOU!!! and I mean that. You have been extremely helpful and kind.

    the fonts for the blog are funky, my guess is because that section had custom styling it doesn't carry over to the mobile because the css wasn't applied to the global? It was applied to the desktop? Sound about right?

    If that is what you feel is the possibility I will get all of that custom stuff moved over to the global section of the custom, or do you feel there is a reason not to do that.

    Also I don't want to keep threading different things when you should be getting credit for fixing the actual issue at hand. Do I give you points?

    Let me know the process, I want to be respectful and follow protocol...

    cheers
    DD

    • Dawn

      Michael:

      I am hoping you get this. The mobile has been working just fine with your help and some of the other cleanup stuff I managed to get done. We were hoping to have our marquee sliders, actually all the sliders be 1200px. I can create the custom code needed to get this done and it looks fine until i view it on a mobile. Mobile breaks that first stack of content and all the others work fine. Is there something I need to add to the mobile? If I go full scree on the sliders then it works fine on mobile yet it's a little large.

      any thoughts?

      • Michael Bissett

        Hey @Dawn! :slight_smile:

        One thing I noticed was that there's a white gap between the photo for the slide, and the text, you should be able to resolve this with this code right here:

        @media only screen and (max-width: 767px) {
        
        #wrapper #loopedSlider.business-slider .content {
            padding: 20px 0px !important;
        }
        
        #loopedSlider.business-slider .content h2 {
            margin-top: 0;
        }
        
        }

        I've got some other optimizations that you may wish to apply as well:

        @media only screen and (max-width: 1024px) {
        
        #loopedSlider.business-slider .content h2 {
            font-size: 0.75em !important;
            line-height: 1.25em !important;
        }
        
        #wrapper #loopedSlider.business-slider .content p {
            font-size: 0.85em;
        }
        
        .slide-number-2 a.woo-sc-button {
            margin-top: 10px !important;
        }
        
        }

        Let me know if this helps please! :slight_smile:

        Kind Regards,
        Michael

        • Dawn

          Hey @Michael Bissett

          I added both sections, one at a time and pulled the second one out because the site became suddenly super slow and unresponsive . could be coincidence but just for testing I did pull that second part out. The button for the slide 2 doesn't seem effected by the margin above, could it be a naming thing? this was something I found the most difficult, I find a name and apply the change only to find it not work. (bleh, the joys). I was hoping to make the marquee buttons orange but to no avail.

          the edits to the css didn't help the mobile stuff, I think I mentioned that already. Ping me with what you would need. You are free to do what you feel needs to be done and I will do what you ask.

          thanks Michael

          • Michael Bissett

            Hey @Dawn, my apologies for the delay here!

            I'm curious as to why that 2nd CSS snippet I shared would cause the site to slow down, it hadn't done that in my testing earlier. :disappointed:

            The button for the slide 2 doesn't seem effected by the margin above, could it be a naming thing? this was something I found the most difficult, I find a name and apply the change only to find it not work.

            If by "naming" you're referring to a CSS ID or Class, then yes, that's possible. It's possible though that the ID you were targeting kept changing with each page reload (tough to say for sure without knowing more about which one you were trying to target).

            I see that your membership's expired here, but should you decide to renew, I'd be more than glad to help you get this sorted out. :slight_smile:

            Hope you're having a great day today!

            Kind Regards,
            Michael

  • Predrag Dubajic

    Hey @Dawn,

    Wow, thanks for all the kind words, I'll make sure to notify Micheal about your response, he's a great guy :slight_smile:

    So about the issues you are having on mobile devices, I inspected your site and believe I see the issue here.
    Inside your custom.css file on line 32 you have this line of code:
    @media only screen and (min-width: 768px) {
    What this does is it defines css for only at resolutions above 768 pixels, the issue is that the @media is opened but it doesn't close anywhere, so every code you added bellow this line is only visible on those screens.
    For example font family is defined below that to Open Sans and on smaller screens is being switched to Helvetice Neue which is defined in style.css

    Hope this helps with the debugging :slight_smile:

    As for opening new threads, if your issues are closely related you can continue discussion in same thread but for others it is desirable to open new thread so it doesn't get cramped in one place :slight_smile:

    Best regards,
    Predrag

  • Dawn

    Predrag

    thank you so much for the reply, what you are saying is exactly what I was thinking was going on. the more I was reading on things the more I was seeing that this was a possible issue. I am new to this stuff so want to ensure I do the right things. Let me clean up what you are saying here and get back on to see what you guys think..

    Thanks for the support guys, I really do appreciate it..

  • Dawn

    Hey team, I made the changes and things appear to be a lot closer. there are two more items I will need help with but I am not sure if they should be a new topic. How about I list them and you tell me if it is new or not. This will at least start getting me trained :slight_smile:

    1: On the mobile view of the home page the blog is now the right color but the fonts are wrong, it seems to be pulling in a different font that is bold too. I don't see where I missed a tag on that, then again I also don't have that style in the global section.

    2: for the widget titled Design Consulting on the home page needs to be the same font as the footer. I have tried numerous times to capture the correct div but I keep messing it up.

    3: I want to change the blog widget title from latest to "from the blog". I have used firebug and been able to get deep enough with those tools but when i try to set it in the css it doesn't work. I also found a thread on this and applied that fix, to no avail.

    thanks guys

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.