I’m optimizing the layout to accommodate for the most popular current and future ad formats, as well as great usability for the users on each device.
1) Can someone tell me what the default breakpoints are for the 4 viewports, as I couldn’t find it in the code. I’m using the Gossip Pro theme.
Desktop: (max) px – _____ px
Horizontal Tablet: _____ px – _____ px
Vertical Tablet: _____ px – _____ px
Mobile: _____ px – _____ px
2) I want to optimize the desktop site for 1,360 pixels wide, so it looks great on super resolutions as well as the popular 1,366×768.
Stretch row and 1,200px content is too small.
Stretch row and 1,400px content would be too big.
Basically I want to have this:
Content Spacing Sidebar
970px 20px 350px = total 1,340px that would leave 26px (13 on each side) to offset the content from the page border.
1) Are my calculations correct?
2) How to achieve this?
UPDATE – REPHRASING MY INITIAL POST
I’m optimizing the layout to accommodate for the most popular current and future ad formats, as well as great usability for the users on each device.
By digging in the CSS code I’ve found these min and max widths
A) max-width:500
B) max-width:767
C) min-width:768 & max-width:1018
D) min-width:1019 & max-width:1140
E) min-width:1141
1) However, there are 4 viewport devices in the builder. Which correspond to which?
Is desktop D or is it E?
Which one is mobile? A or B?
2) I want to optimize the desktop site for 1,326 pixels wide, so it looks great on super resolutions as well as the popular 1,366×768.
970 content + 20 padding + 336 sidebar = 1326px which leaves 40px on the sides for browser UI and scrollbar.
So I’ve set the desktop zone width to 1,326 pixels.
Maincontent = 970px with 10px right margin instead of using padding on the row.
Sidebar = 336px with 10px left margin instead of using padding on the row.
These settings look excellent on desktop.
In the builder I can select:
Stretch row and 1,200px content = too small.
Stretch row and 1,400px content = too big.
How does what I select here affect my layout of 1,326 pixels?
3) For the smaller than desktop devices I will want to keep the 20px padding (right/left margin of 10px) in between the content and the sidebar.
The sidebar would ideally be 336px or the smaller 300px version.
How do I calculate how much to set the zone width to in those viewports?
Hello Chris!
Check here: https://prnt.sc/mIQ3FBfm8P17
This will require custom work, which is not covered by the support team.
Thank you!
Hello Bettina,
I hope you are doing well.
I found the following code snippet within the theme files, which appears to define the responsive breakpoints:
CSS
/*
* responsive settings
*/
/* responsive landscape tablet */
@responsive_l_tablet_max: 1140px;
@responsive_l_tablet_min: 1019px;
/* responsive portrait tablet */
@responsive_p_tablet_max: 1018px;
@responsive_p_tablet_min: 768px;
/* responsive portrait phone */
@responsive_p_phone_max: 767px;
My question is about the mobile breakpoint, currently defined as $responsive_p_phone_max: 767px.
The theme’s default mobile layout works well on smaller screens (320px – 500px), but I feel the range up to 767px is too large and causes design issues on larger phones or in landscape mode. At 750px, for example, the layout looks stretched in mobile mode before transitioning to the tablet layout at 768px.
Question:
Considering that this code appears to be SASS/LESS and not pure CSS, what is the correct procedure to implement a change to this value?
Is there a functions.php filter or function in the child theme that would allow me to change the $responsive_p_phone_max value to something like 575px, or is it necessary to modify and recompile the SASS/LESS files?
Please Note:
I fully understand that any such modification is at my own risk and is not covered by support. I am aware of the potential impact.
I am using only the standard and mobile layouts integrated into the theme, and not the separate tagDiv Mobile Theme plugin.
I appreciate any guidance you can provide on the safest way to make this change.
Hi,
Don’t edit theme LESS files.
Those variables are compiled before use, so changing them has no effect unless you rebuild the theme (not supported).
Use a child theme. Open your child theme folder and edit the style.css (or a new file like breakpoints.css), add:
/* Custom mobile breakpoint */
@media (max-width: 575px) {
/* your mobile rules */
}
/* Between 576–767px (old mobile range) */
@media (min-width: 576px) and (max-width: 767px) {
/* your tablet-like rules */
}
Make sure your CSS loads last.
In functions.php:
add_action(‘wp_enqueue_scripts’, function() {
wp_enqueue_style(‘my-breakpoints’,
get_stylesheet_directory_uri() . ‘/breakpoints.css’,
array(‘td-theme’), ‘1.0’);
}, 999);
Clear caches (theme + browser) and test at 575px width your new breakpoint now applies.
I hope this will help you!
Thanks a lot again Calin.
Have a Nice week.
Regards
