Responsiveness and mobile view control

  • Avo Avetisyan

    (@loyaltyoverroyalty)


    1 year, 8 months ago

    Hey guys, do you have any idea how to change the default WordPress mobile breakpoint from 600px to something else? Let’s say I have a navigation block in the builder, and I want the desktop version to transform into mobile. How can I do that? Also, why is there no option for responsive design? Should we have to struggle while working with block themes to fix the mobile version each time the client changes anything in the desktop version?

    https://stackoverflow.com/a/74963424

    this solution is ugly.
    —-
    ALSO


    I’m trying to migrate from classic editor to block editor, and i can’t find a way to add styles for mobile, and i’m not even talking about this type of complex thing that I need to handle…
    https://prnt.sc/kHxM3WbaWpRP

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator janmtm

    (@janmtm)

    1 year, 7 months ago

    Hi @loyaltyoverroyalty !

    Different themes do indeed set different default breakpoints for responsiveness, so there’s not a single global solution. However, adjusting your own breakpoints with CSS is a common approach and can be customized to fit your design needs.

    To alter breakpoints, you can target specific screen sizes using CSS media queries as per the example CSS code you shared.

    If you let us know what theme you’re using or what specific elements you want to adjust, you may be able to get a more specific answer.

    Thread Starter Avo Avetisyan

    (@loyaltyoverroyalty)

    1 year, 7 months ago

    Hey, thanks for the reply! Just to clarify, I’m not using a theme—it’s all custom. So it’s really just me and WordPress here, and I’m trying to find a way to handle these things natively.

    It would be awesome if I could do mobile adjustments, like reordering columns, setting custom breakpoints, or generally having more control over the responsive layout without constantly tweaking CSS. Right now, it feels like I have to fight the system every time the client wants a tweak on desktop that messes with mobile.

    Are there any hidden options, or maybe a recommended workflow for handling responsiveness better within the block editor? Thanks in advance!

    Moderator janmtm

    (@janmtm)

    1 year, 7 months ago

    Hey @loyaltyoverroyalty

    I see. Okay! Since you’re using a block theme, the article linked below should guide you in setting up an approach to edit these breakpoints within the Block Editor:

    How to Modify theme.json Data Using Server-Side Filters

    Please review the article, test out the methods in your theme and context, and feel free to reach out again if you have further questions.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Responsiveness and mobile view control’ is closed to new replies.