Okay
  Public Ticket #1065536
Responsive Standard Format Breakpoints?
Closed

Comments

  •  2
    Maximus started the conversation

    Hey again,

    I found the responsive styling very useful! Especially to quickly fix Font Size or something else.

    However was a little bit confusing, because it didn't has a standart kind of breakpoints, wich would be very helpful. Like this:

    https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints

    Now it just have lots of different breakpoints... wich I can probably fix manualy, but this isn't the point of yellow pencil...

    The responsive mode should have some kind of indicator (maybe a small logo for wich popular device(s) it is right now - wich would be just a nice visual goodie)

    Like here:  http://simplecss.eu/

    And if they overlap, display up to 5-10 most used devices in little symbols or very small text or something...

    Here is an example... what happens when I freely use the responsive mode.

    @media (max-width:1248px){

    .et_pb_row_1 .et_pb_module span{
    line-height:72px;
    }

    }

    @media (max-width:1135px){

    .et_pb_row_1 .et_pb_module span{
    line-height:72px;
    }

    }

    @media (max-width:975px){

    .et_pb_row_1 .et_pb_module span{
    line-height:72px;
    }

    }

    @media (max-width:908px){

    .et_pb_row_1 .et_pb_module span{
    line-height:72px;
    }

    }

    @media (max-width:816px){

    .et_pb_row_1 .et_pb_module span{
    line-height:67px;
    }

    }

    @media (max-width:768px){

    .et_pb_row_1 .et_pb_module span{
    line-height:70px;
    }

    }

    @media (max-width:516px){

    .et_pb_row_1 .et_pb_module span{
    font-size:55px !important;
    }

    }

    @media (max-width:467px){

    .et_pb_row_1 .et_pb_module span{
    font-size:55px !important;
    }

    }

    @media (max-width:460px){

    .et_pb_row_1 .et_pb_module span{
    font-size:58.1px !important;
    }

    }

    @media (max-width:422px){

    .et_pb_row_1 .et_pb_module span{
    font-size:50px !important;
    }

    }

    @media (max-width:420px){

    .et_pb_row_1 .et_pb_module span{
    font-size:52.7px !important;
    }

    }

    @media (max-width:399px){

    .et_pb_row_1 .et_pb_module span{
    font-size:50px !important;
    }

    }

    @media (max-width:398px){

    .et_pb_row_1 .et_pb_module span{
    font-size:47.9px !important;
    }

    }

    @media (max-width:320px){

    .et_pb_row_1 .et_pb_module span{
    font-size:38.3px !important;
    }

    #toptext .et_pb_custom_button_icon{
    font-size:22px !important;
    }

    }

    See whats happening? Do you know what I mean?

    I must be very precise with my mouse to edit some normal breakpoint again...

    Maybe you can come up with a "Snap-Modus"-Option where the responsive window snaps to the next smaller/bigger breakpoint for the most used devices.

    Please check on this.

    Thank you :)

    Best Wishes

  •  57
    Zafer replied

    Hey There,

    I glad you like it!

    We will add defined breakpoints to Responsive Tool. You will see defined breakpoints like a clickable on the metric in Responsive Mode. This feature is our priority!

    Thank you for your feedback!

    Best Regards

  •  2
    Maximus replied

    Great that you added it !

    I really like your way of doing things, in a clear, useful, lovely way! 

    Thanks for that!

    ps: do you have a changelog somewhere?

    edit: I found it :)

    http://waspthemes.com/yellow-pencil/inc/changelog.txt

  •  57
    Zafer replied

    Hey There,

    Thank you maximus! I glad you like it!

    Best Regards