Upfront Theme - Responsiveness

Why does the site look so bad responsively? How do I make it responsive?

All my images look shrunken on my mobile and only the nav menu and logo look good...everything else is warped.

Thanks again...

  • James Morris

    Hello caleb.mkdaman,

    I hope you are well today. Thank you for your question.

    When designing your site for responsiveness, please keep in mind that responsiveness is based on the width of the images. So, if you are using images that are very wide, but very thin, such as your Hero-Imayge-1060x249-2234.png graphic, it's not going to scale very well.

    As far as the callout bubble under "Even works on odors from durian" goes, this can be adjusted for mobile in Upfront's Preset CSS. You will need to identify which styles are being applied to small screens and reduce the padding and/or to make this display better.

    The section "Discover why our natural products are the new hygiene craze!" could be made more legible on mobile by adding a background color with 25-33% opacity so it is semi-transparent.

    All of the above assumes you've defined your styles in such a way that there are @media queries present in your CSS. If they are not, you can add them quite simply using something like the following:

    @media only screen and (max-width: 500px) {
        .element {
            background-color: white;
            opacity: 0.25;
        }
    }

    I hope this clarifies a bit. Let us know if you have any further questions. We'll be happy to help! :slight_smile:

    Best regards,

    James Morris

  • caleb.mkdaman

    Thanks, that helps...but if there is no URL to the CURRENT homepage, how will I know which page to edit for reference purposes?

    I posted about help with design in the member forums as I was requested to do, but so far no one has responded to my website about what to add and what to subtract, so I'm still left in the lurch.

    Does Upfront theme work better with Marketpress or is it also compatible with WooCommerce? Coz I'm more used to and familiar with WooCommerce.

  • James Morris

    Hello caleb.mkdaman,

    At present, Upfront works best with WooCommerce. We are working on improving compatibility with MarketPress, but you should have no issues using Upfront with WooCommerce.

    The way you edit individual pages in Upfront is to navigate to the page you want to edit, then click the Upfront button in your Admin Toolbar. This will enable you to edit that page. For pages that have global regions, you can edit those and select whether to apply the changes to only that page or all pages that include that global region.

    The following blog post will help you get started with Upfront: https://premium.wpmudev.org/blog/upfront-basics/

    If you follow through the other posts linked to from there, that should help you get much more familiar with Upfront and how to customize it to meet your needs.

    Also, as a member of WPMU DEV you have access to our courses here. We recently started a course on Upfront. Perhaps that would be helpful for you as well.

    https://premium.wpmudev.org/academy/courses/introduction-to-upfront/units/

    I hope that clarifies a bit. Let us know if you have any further questions. We'll be happy to help! :slight_smile:

    Best regards,

    James Morris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.