Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Text Block Scaling Responsive/Window Size

Featured Lock Resolved Issue
I have a website that has a text block and a sidebar. I notice that in certain window sizes/screen resolutions the text block overlaps the sidebar of the website. In fixed tablet & mobile responsive views the block adjusts but in the intermediate settings between full screen on a large monitor and tablet, the overlap.

See here: https://www.borderhighlands.com

If you resize your browser window dynamically, there will be points when the block overlaps the sidebar - how do I fix that?

Thanks

Attachments (3)

  • snip_full_screen__alot_smaller_ok_again.png
    snip_full_screen__alot_smaller_ok_again.png 511 KB
  • snip_full_screen_smaller_notok.png
    snip_full_screen_smaller_notok.png 594.7 KB
  • snip_full_screen__alot_smaller_ok_again.png
    snip_full_screen__alot_smaller_ok_again.png 511 KB

5 Answers

Mehtaz Afsana Borsha - Staff

More than a month ago #Permalink
Hi,
Use this custom css

.sppb-text-center {
max-width: 1000px !important;

}


@media only screen and (min-width: 1024px) and (max-width: 1024px) {
.sppb-text-center {
max-width: 800px !important;

}
.ttr_blockart-block{
position:relative;
right:20px;
}

}

@media (max-width: 768px){
.sppb-text-center {
max-width: 600px !important;
font-size: 14px;
}
}

-Best Regards
Mehtaz

Ross McIntyre

More than a month ago #Permalink
I have tried this CSS in the Page "Options" CSS but it hasn't made a difference on a laptop screen there is still overlap with the sidebar. Have I put it in the right place?

Thanks
Ross

Ross McIntyre

More than a month ago #Permalink
Apologies - I have applied this to the actual overlapping text block and it appears to be working.
Thanks
Ross

Gian Luca

More than a month ago #Permalink
Hi,
Use this custom css

.sppb-text-center {
max-width: 1000px !important;

}


@media only screen and (min-width: 1024px) and (max-width: 1024px) {
.sppb-text-center {
max-width: 800px !important;

}
.ttr_blockart-block{
position:relative;
right:20px;
}

}

@media (max-width: 768px){
.sppb-text-center {
max-width: 600px !important;
font-size: 14px;
}
}

-Best Regards
Mehtaz


A vivid example of when you need to enter additional stop points in SPPB

Pavel

More than a month ago #Permalink
A vivid example of when you need to enter additional stop points in SPPB

In this case, you are mistaken. Additional breakpoint to SP PB would not have helped.
This depends on the template in this case. The template is not built on Bootstrap. Therefore, there will only manual coding


There are no replies made for this post yet.
Be one of the first to reply to this post!

122

Templates

320316

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us