Formatting Background for Mobile

  • Unknown's avatar
    walkerstenthdimension · Member ·

    Hi,

    On my website, when you navigate to any of the tabs in the top right corner (News, Contact, etc.), it redirects to a page which displays a white background with coloured orbs on the far right side. I am very happy with the display on my computer.

    However, when I go to those same tabs on a mobile device, the orbs overlap with the text and it looks messy and unprofessional.

    How can I format my background so that it will appear on mobile in the same way that it does on a computer? Is there a way to do this?

    If not, is there a way to change it so that the computer display remains the same, but the mobile background is just simply plain white?

    I hope my question is clear. Thanks in advance!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there,

    How can I format my background so that it will appear on mobile in the same way that it does on a computer? Is there a way to do this?

    There really isn’t a way. What we would have to do would be to narrow the content to leave room for the orbs, and that would render your content very narrow and very hard to read.

    I do have three suggestions you can try out. The first adds a slightly opaque white background to the #primary div, which is the one that contains your content. 

    #primary {
	background-color: rgba(255, 255, 255, 0.7) !important;
}

    This second one adds the background to the #content div, which is one level up from #primary, but it leave a slight gap at the top of the content area. 

    #content {
	background-color: rgba(255, 255, 255, 0.7) !important;
}

    The third goes one more level up. 

    #content-wrapper {
	background-color: rgba(255, 255, 255, 0.7) !important;
}

    See what you think of those suggestions and let me know.

  • Unknown's avatar
    thesacredpath · Member ·

    On removing it on smaller screens, when I check your site, we would have to take the background away at about 1150px in width since that is when the text starts to overlap the orbs. Many people keep their browsers around 1024px in width, so likely a good portion of your visitors would not see the orbs at all.

  • The topic ‘Formatting Background for Mobile’ is closed to new replies.