Phone Horizontal Responsive Mode

Hello @akpak ,

Basically, there are 3 controls width, works in terms of min-width.
Mobile (Default) : All devices
Tablet : 768px (min-width)
Desktop : 992px (min-width)

I would recommend you to adjust the value of Mobile for horizontal phone responsive mode.

Best Regards!

Thank you @codersantosh , i have a other question, so 767 pixel and down for a phone? This is not too much? Please tell me how I can change this value

• This reply was modified 4 years ago by akpak.
• This reply was modified 4 years ago by akpak.

Hello @akpak ,
Yes, It is standard screen size for responsive design.
Unfortunately, you cannot change the device size.
For some section block, if you want to change CSS properties, you can use Additional CSS on Customizer.
Go to Appearance => Customize => Additional CSS

/* Extra small devices ( 600px and down) */
@media only screen and (max-width: 600px) {
CSS GOES HERE
} 

Best Regards!

Actually this good for me, but what code do I write? I know CSS codes, but I don’t understand writing it. What should I consider to add an in-block CSS device property? Thank you for helps @codersantosh

<!-- wp:gutentor/m4 {"gID":"gm6ea4846","columns":2,"dLayout":"sixSix","mHideMode":{"desktop":true}} -->
<section id="gm6ea4846" class="wp-block-gutentor-m4 section-gm6ea4846 gutentor-module gutentor-advanced-columns d-lg-none"><div class="grid-container"><div class="grid-row"><!-- wp:gutentor/m4-col {"gID":"gme60557","mPID":"6ea4846d-e19d-462a-ace2-3d537e4d9079","columns":2,"dLayout":"sixSix","layoutIndex":0,"dLayoutColumn":6,"colWidth":49.8,"mBGType":"image-bg","mBGImage":{"id":9895,"title":"500x150 header-logo","filename":"500x150-header-logo-1.png","url":"https://dolunaydedektiflik.com/wp-content/uploads/2020/11/500x150-header-logo-1.png","link":"https://dolunaydedektiflik.com/500x150-header-logo-2/","alt":"500x150 header-logo","author":"1","description":"","caption":"","name":"500x150-header-logo-2","status":"inherit","uploadedTo":0,"date":"2020-11-03T19:58:33.000Z","modified":"2020-11-03T19:59:02.000Z","menuOrder":0,"mime":"image/png","type":"image","subtype":"png","icon":"https://dolunaydedektiflik.com/wp-includes/images/media/default.png","dateFormatted":"3 Kas?m 2020","nonces":{"update":"b3b656ea70","delete":"cf5539d697","edit":"cd6754c6d6"},"editLink":"https://dolunaydedektiflik.com/wp-admin/post.php?post=9895\u0026action=edit","meta":false,"authorName":"admin","filesizeInBytes":21091,"filesizeHumanReadable":"21 KB","context":"","height":150,"width":500,"orientation":"landscape","sizes":{"thumbnail":{"height":150,"width":150,"url":"https://dolunaydedektiflik.com/wp-content/uploads/2020/11/500x150-header-logo-1-150x150.png","orientation":"landscape"},"medium":{"height":90,"width":300,"url":"https://dolunaydedektiflik.com/wp-content/uploads/2020/11/500x150-header-logo-1-300x90.png","orientation":"landscape"},"full":{"url":"https://dolunaydedektiflik.com/wp-content/uploads/2020/11/500x150-header-logo-1.png","height":150,"width":500,"orientation":"landscape"}},"compat":{"item":"","meta":""}},"mBGImgSize":"cover","mBGImgPos":"","mOnOverlay":true,"mOverlayColor":{"color":{"_originalInput":{"h":0,"s":0,"l":0,"a":0.5,"source":"rgb"},"_r":0,"_g":0,"_b":0,"_a":0.5,"_roundA":0.5,"_format":"hsl","_ok":true,"_tc_id":71},"hex":"#000000","hsl":{"h":0,"s":0,"l":0,"a":0.5},"hsv":{"h":0,"s":0,"v":0,"a":0.5},"oldHue":0,"rgb":{"r":0,"g":0,"b":0,"a":0.5},"source":"rgb"},"mMargin":{"mTop":"-645","tTop":"-655","tRight":"180","tLeft":"110","mRight":"60"},"mPadding":{"mBottom":"80"}} -->
<div id="col-gme60557" class="wp-block-gutentor-m4-col col-gme60557 gutentor-single-column  grid-lg-6 grid-md-12 grid-12"><div id="section-gme60557" class="section-gme60557 gutentor-col-wrap has-image-bg has-custom-bg has-gutentor-overlay"><!-- wp:gutentor/e0 {"gID":"gfd31d7"} -->
<div id="section-gfd31d7" class="wp-block-gutentor-e0 section-gfd31d7 gutentor-element gutentor-element-advanced-text"><div class="gutentor-text-wrap"><p class="gutentor-text">Gutentor Simple Text</p></div></div>
<!-- /wp:gutentor/e0 --></div></div>
<!-- /wp:gutentor/m4-col -->

logo block codes for you to see, how should it be for here css

I solved the problem with the picture height and width setting. This stopped the disproportionate growth. Meanwhile, will gutentor continue to evolve and update? Because it is the best among Gutenberg blocks.

Hello, @akpak I am happy to know that the issue has been resolved.

Yes, Gutentor will be continuously updated and evolve. The most important point of the Gutentor is all the features will always be FREE, there will be no premium version.

First of all, thank you for everything. @codersantosh

Today again I encountered a situation that I could not understand.

Previously, I was using the same content for mobile and tablet.

Now I made another mobile tablet other content, I closed the views. However, both appeared on the screen in the range of 558px 748px. Then I dragged someone off the screen and temporarily stopped the problem.

Is this problem with Gutentor or theme? I could not solve it, if I ask, do you have the opportunity to check? Thank you.

image

Hello @akpak ,

I could not replicate the issue on my end.
Can you export the block ( or page template) and send the download link, so that the issue can replicate.
If it is an issue on Gutentor, we will definitely fix it.

Note: It is recommended to create a new support thread for new query ??

Best Regards!