Home / Forums / You Theme Support / Mobile Issues: Typewriter & Logo

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts

  • petrie105
    Participant

    Hello!

    1. I am having some pixilation issues with the opening typewriter text, please see the referenced image below.
    https://www.dropbox.com/s/8c1wbv2z9hrtgcc/FullSizeRender.jpg-1.jpeg?dl=0

    2. The size of the text shrinks down several points in mobile view and becomes disproportional to the rest of the header, can I easily edit the font size somewhere without effecting the browser text?

    3. Is it possible to left align the logo and shift the menu/dock to the right so they are on the same line?

    Thank you!

    Hi @petrie105

    Can you please send over your site’s URL and login credentials so I can check on item 1 and 2?

    For item 3, try to add this CSS into Appearance > Theme Options > Custom CSS > Mobile CSS

    #header-wrap .dock-panel-wrap {
        width: 80px;
        float: left;
        margin-top: 20px;
        border: 0;
    }
    
    nav.background-wrap.skinset-dockpanel.dock-menu-tabs.acoda-skin {
        width: 1000%;
    }

    Regards,


    petrie105
    Participant
    This reply has been marked as private.

    Hi @petrie105

    1. I checked this on Chrome dev Tools and I do not see any pixelation on the text simulating varied devices and screen resolution

    2. This can be done via CSS. Copy and past this CSS and paste it into Appearance > Theme Options > Custom CSS > Mobile CSS

    .acoda-writer-wrap h1 {
        font-size: 2rem;
    }

    Change the font-size value to whatever you prefer

    3. The issue with the footer should be sorted out now. Can you please check and confirm?

    Regards,


    petrie105
    Participant

    Thank you the footer issue has been resolved.

    Last questions, how do you shift the logo to the top (above the dock menu) and put some separation between the entire header and the image text on mobile view. Please see reference here:

    https://www.dropbox.com/s/xjrou35q2rirv1e/IMG_4715.PNG.png?dl=0

    Thank you!

    Hi @petrie105

    I can’t seem to visualize what you want to do. Is the screenshot you sent a mockup of what you want done? I have checked it and it’s almost identical to the current look of the live site.

    Please elaborate further or resend another mockup.

    Regards,


    petrie105
    Participant

    Apologies, the original screenshot is the existing mobile view.

    I would like to put the logo on top and the doc below – in white. I have mocked up my intention here: https://www.dropbox.com/s/6n1pz1e0zi4kwoc/IMG_4715_2.png?dl=0

    Let me know if you have further questions.
    Thank you

    Hi @petrie105

    Thanks for elaborating.

    Copy and paste this CSS into Theme Options > Custom CSS > Mobile CSS

    
    #header-wrap .dock-panel-wrap {
        position: absolute;
        top: 85px;
    }
    
    div#header {
        position: absolute;
        top: 0;
    }

    Regards,


    petrie105
    Participant

    Thank you, that helped resolve the issue.

    Unfortunately I have a few more things to iron out on the Mobile Site.

    1. The ‘description’ information within my services grid gallery that displays on hover is getting cut off on mobile. Is there a way make the text smaller only on mobile, so it fits the entire description? Below is a screenshot of the issue and as you can see currently the title is being cut off as well as the bottom button.

    https://www.dropbox.com/s/hoc7thjdkqijekf/unnamed.png?dl=0

    2. How do I center this image gallery on Mobile view.

    https://www.dropbox.com/s/sna2v2r1ujnp7f5/IMG_4845.PNG?dl=0

    Thank you for all the help.

    Hi @petrie105

    Which page is the overlap happening on? I tested all 4 pages and I do not see the issue.

    For the images, can you please try to replace the element you are using to our own Grid Gallery element instead of the current Image Gallery element since we do not have control over this element.

    Regards,


    petrie105
    Participant

    The overlap is on the ‘Services’ page when viewed on a phone: http://funisfirst.com/wordpressfif/services-creative/

    By switching the gallery it has resolved the other issue, thank you.

    Regards!

    Hi @petrie105

    I have checked your site again on mobile and I didn’t see any overlapping on ‘Services’ page. Can you clear your browser cache on mobile and recheck your site? Also, can you send screenshots?

    Regards,


    petrie105
    Participant

    Hi,

    I’ve cleared my cache and it is still cutting off the hover text (see images below). Is there CSS I can apply to mobile CSS to make the text box or text smaller and ensure it fits on every type of mobile devise.

    Services page – image that has the issue:
    https://www.dropbox.com/s/mbr9q9r98d1inho/Services_Image.PNG?dl=0

    Then when you hover on the image the text is cut off: (This is what I need to fix)
    https://www.dropbox.com/s/fpae94czu7mscpf/Services_Hover_Cutoff.PNG?dl=0

    Let me know if you need more explanation. Thanks!

    Hi @petrie105

    I now see the issue.

    There are 2 options we can consider:
    1. Hide the flexishape on small mobile screens
    2. You can decrease the text desciption on the first grid item so we can increase the top padding of its title so it does not get overlapped by the flexishape.

    Regards,.


    petrie105
    Participant

    Option 1 sounds great but I would want to ensure it worked on every phone display. Could I hide the flexishape for all mobile screens?

    Thanks!

Viewing 15 posts - 1 through 15 (of 19 total)

You must be logged in to reply to this topic.