How Can I Change The Responsive Breakpoints for the Site to Look Better on the iPad

[markob17]

Hi,

When viewing my website on an iPad (768×1024) in portrait mode, the right sidebar is showing on the right instead of below the main content and it doesn’t look right with my particular layout. I’d like to change the responsive CSS breakpoint a few pixels to make the right sidebar sit below the main article, just like it does when viewing on resolutions below 768 pixels. How can I go about doing this?

Thank you,

 

[Laura]

Hello, can you share admin credentials? 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[markob17]

Hi Laura,

Unfortunately the site is running on a local machine in my network and not connected to the web yet. When viewing your Kleo demo online the same thing happens so you will be able to troubleshoot using it. Probably default behavior but I’d like to change 768px breakpoint a few pixels to make the sidebar go below the post, similar to the way it looks on resolutions below 768px.

Capture 1 shows what the site looks like on an iPad at 768×1024 pixels, capture 2 shows what it looks like on resolutions smaller for illustration purposes. I pretty much need to change Kleo’s breakpoint from 768px to 769px so that things triggers sooner and thus the sidebar will display below the post, similar to Capture 2.

Thanks,

Mark

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, have you tried going to Theme Options > Buddypress and select the right sidebar layout then full width profile header?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[markob17]

Hi Laura,

Had that enabled but doesn’t make a difference. I actually just figured out how to make it do what I want via CSS. The sidebar is now below the post when viewing on the iPad with a 768×1024 screen resolution. Just in case anybody else wants to do this, here’s the code I used:

@media only screen and (min-width: 766px) and (max-width: 769px) {
.template-page.col-sm-9 {width: 100%; border-right: none; margin-top: -15px; }
#main-container>.row { display: inline; }
.sidebar.sidebar-main.col-sm-3.sidebar-right { width: 100%!important; border-left: none; }}

Thanks for your help.

Mark

[Laura]

Hello, thanks for sharing! I am sure it will help others 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Author]

Posts