Mobile responsive issues in Upfront

My website does not function properly on mobile or on the tablet. The main site is using upfront and the menu are not formatting to responsive mode, titles and headers are too big for the page, the page width is skinnier than the device. If the width goes under 550px everything breaks. The video also is not responsive. My 2 menus as well. Is it possible to merge them in mobile view?

  • Predrag Dubajic

    Hey Jonathan,

    Hope you're doing well :slight_smile:

    I had a look at your site and let's first talk about the page width on smaller screens, there are two things that are affecting this.
    First one are the heading font sizes, you have huge fonts there and some of the headings go over page width due to that, you can go to responsive mode in Upfront and adjust the font sizes there to take care of this.

    Second thing that causes it and is one of your questions as well is the video not being responsive.
    That is due to iframe you included having fixed width, but we should be able to take care of it with some CSS like this one:

    .upfront_code-element {
        position: relative;
        padding-bottom: 56%;
        height: 0;
        overflow: hidden;
    }
    
    .upfront_code-element iframe {
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    My 2 menus as well. Is it possible to merge them in mobile view?

    I'm afraid that this is not possible as an option in Upfront but what you can try is creating a third menu with all of your menu items combined and then hide that menu on larger screens while showing it only on mobile devices on which you will hide other two menus.

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.