I feel that the default page widths are not sufficient.

I feel that the default page widths are not sufficient. 1080px, 570px and 315px respectively.

This is especially true in the tablet width (570px) I am testing out a page in 3 versions of iPads and 2 surface pros, and the left and right paddings take about 15-20% real estate, which I find really annoying.

If anyone can point me to the right direction on how can I do these changes, i will be forever grateful.

Thank you!

  • Adam Czajczyk

    Hello Alana,

    I hope you're well today and thank you for your question!

    Before I address your question, let me please explain that I've moved your post from "Members" forum to a "Support" forum. I suppose that your intention was to open a support ticket instead of opening discussion for members only (where we do not provide support). I hope that's all right

    Just for future reference, in case you'd like to open a support ticket to get support from us (as WPMU DEV support staff), please use this form here:

    https://premium.wpmudev.org/forums/forum/support#question-modal

    As for the issue itself.

    This is how the theme you're using was designed so I'd say that's a design decision rather than a bug or "glitch" of other kind. We are constantly adding new themes and hopefully with Upfront 1.0 coming on-line soon (though I cannot give you any ETA on this) you will gain much more flexibility and "design freedom" at hand, as well as many new Upfront child themes.

    That said, currently you may want to add some custom CSS code to your site to increase site width. For example to increase width for "desktop device" you could use this rule:

    .upfront-grid-layout {width:1300px!important;}

    You may want to replace "1300px" value with other one (in pixels). In order to apply it to the site please open your front page in browser and then:

    - enable "Upfront" editor (by clicking on "Upfront" link in admin toolbar)
    - click on "Theme settings" link in Upfront panel
    - click on "add custom CSS rules" in Upfont panel
    - add aforementioned rule at the end of the code existing inside the editor that shows up
    - save CSS editor and save Upfront

    I hope that helps!

    Best regards,
    Adam

  • Alana

    Thanks Adam for the reply.

    I was able to expand the page widths using the CSS edit you've posted.

    But unfortunately, it seems some of the draggable elements that at least Ive used in the first page I'm working on are all dependent on the template's default page width.

    Although I do understand that this can easily be remedied by CSS edits - I would wish to be able to do such thing on each of the elements (dare I say like Visual Composer) Because idea behind "drag and drop" is more like "drag and edit CSS" on each of the responsive modes as most elements is fully dependent on the starter theme rather than presenting tools to promote creativity.

    So when you say: "design decision rather than a bug or "glitch" of other kind" I find more of a hindrance. I hope the future iteration of upfront will address this issue. I apologize for the rant: I'm just really frustrated. I truly like upfront and the potential on how it can be used as an irreplaceable tool work our workflow.

  • Predrag Dubajic

    Hi Alana,

    Thanks for sharing your thoughts on Upfront, we appreciate any feedback, good or bad, it helps us on improving the product to make it more appealing to the users

    Our developers are currently considering adding an option that will allow users to create their own break points in the responsive mode in order to make further adjustments.

    For now you can make regions more fluid on tablet devices by adding this CSS and adjusting width:

    @media only screen and (max-width: 1079px) and (min-width: 570px) {
    	.upfront-grid-layout {
    	    width: 90%;
    	}
    }

    Best regards,
    Predrag