Responsive Text Size Code
I'm in the process of making my advocacy forms responsive and I just have one more hurdle! My header text is not scaling down in size when I shrink the window, so the text just gets cut off and too large/difficult to read once it gets down to a mobile format. Does anyone know a CSS trick I can use to correct this? Should I put a media query somewhere? What does that look like?
Thanks fo the help!
- Sydney
Comments
-
Generally, the CSS3 media query could look like the following (replace the XXX with your breakpoint screen width and feel free to modify the content within accordingly) -- that basically tells the browser that when the screen dimension is of that max-width pixel wise, then do whatever contains within.
@media (max-width: XXXpx){h1,h2,h3,h4{
font-size: 14pt
}
}
If you are using Bootstrap, you can tap into their helper classes, i.e.<span style="color:rgb(0,102,153);">@media</span> <span>(</span><span>max-width</span><span style="color:rgb(85,85,85);">:</span> <span style="color:rgb(85,85,85);">@</span><span>screen-xs-max</span><span>)</span> <span>{</span> <span style="color:rgb(0,170,136);">...</span> <span>}<br/><br/>more on that -- </span>
http://getbootstrap.com/css/Sydney Moyer:
Hi all,
I'm in the process of making my advocacy forms responsive and I just have one more hurdle! My header text is not scaling down in size when I shrink the window, so the text just gets cut off and too large/difficult to read once it gets down to a mobile format. Does anyone know a CSS trick I can use to correct this? Should I put a media query somewhere? What does that look like?
Thanks fo the help!
- Sydney0 -
Sydney Moyer:
Hi all,
I'm in the process of making my advocacy forms responsive and I just have one more hurdle! My header text is not scaling down in size when I shrink the window, so the text just gets cut off and too large/difficult to read once it gets down to a mobile format. Does anyone know a CSS trick I can use to correct this? Should I put a media query somewhere? What does that look like?
Thanks fo the help!
- SydneyHi Sydney,
Are you using the Lumiante Advocacy Responsive Wrapper Kit? It has a lot of the styles & media queries you'll need: https://community.blackbaud.com/reviews/item/36/1323
Cheers,
Erik0 -
Thanks Daniel!
Forgive my lack of awareness on media queries, but do you know
where I ought to put them? Should they just go under the class of
the block of text I’m styling in the stylesheet? Or do they have
their own special place in the code?Appreciate your
help!-
Sydney0 -
Yes I actually
did use the kit to set this up! I’m looking for a deeper level of
customization though. Basically I added a background image to the
header, and instead of using the logo as the visual in the header,
I swapped it out for headline text (you can see it in a sample
alert here:
https://secure2.convio.net/clf/site/Advocacy?cmd=display&page=UserAction&id=519).
The headline text is breaking at about 675px wide, however, because
the font size won’t scale down. I’ve tried putting the media
queries mentioned above in the stylesheet but they don’t seem to be
working. Not sure what I’m doing wrong!-
Sydney0 -
Sydney Moyer:
Yes I actually did use the kit to set this up! I’m looking for a deeper level of customization though. Basically I added a background image to the header, and instead of using the logo as the visual in the header, I swapped it out for headline text (you can see it in a sample alert here: https://secure2.convio.net/clf/site/Advocacy?cmd=display&page=UserAction&id=519). The headline text is breaking at about 675px wide, however, because the font size won’t scale down. I’ve tried putting the media queries mentioned above in the stylesheet but they don’t seem to be working. Not sure what I’m doing wrong!
- Sydney
Hmm. The columns in the alert (the input fields & message) are supposed to move to a single column format (stacked) when the window gets resized smaller so there's something broken -- they aren't collapsing. You should test without your modifications & then start taking steps forward.
All of the media queries are in the advocacy_responsive_css file. That's the place you should add in declarations for your title sizes.0 -
Looks like you have your <style> embedded within the PageWrapper "Additional HTML tags for HEAD Element", and I did see some of media queries reference been made on the header, although they might be made incorrectly (i.e. line 385, the way you wrap the media queries inside of targetted class element .navbar-brand I think that's not correct (you have it the other way around, refer to below for correct one)
view-source:https://secure2.convio.net/clf/site/Advocacy?cmd=display&page=UserAction&id=519
you may want to paste this into the existing <style> tag
@media (max-width: 699px){
h1.navbar-brand {
font-size: 5em;
}
}
@media (max-width: 499px){
h1.navbar-brand {
font-size: 2.7em;
}
}
The coloring is just to show how to wrap the CSS inside of the media queries
You might want to make sure that there is no duplicate on the breakpoint, or better put this at the end of your style tag before the closing </style>
regards,
DanielSydney Moyer:
Thanks Daniel! Forgive my lack of awareness on media queries, but do you know where I ought to put them? Should they just go under the class of the block of text I’m styling in the stylesheet? Or do they have their own special place in the code?
Appreciate your help!
- Sydney
P.s.
@Erik -- I don't think she' using the responsive stlye css, the file isn't included in hers, but either way, if it's just to resolve the header font-size, she could make do with just the barebones
@Sydney --
You would want to differentiate the class assignment of your h1.navbar-brand and that image link on the footer which uses the same class while they are actually differents element in nature, (one is an h1 and the other is <a> tag -- assign different class name for either of them, don't use the same, or else the CSS ruleset is going to conflict one another inadvertently)
you need to clean up that invalid @media queries line within your .navbar-brand selector on your <style>
like for example - line 186 (remove the highlighted red -- that's not valid CSS)
.navbar-brand{
float:none;
margin:0 auto;
height:auto;
max-width:80%;
font-size: 7em;
font-weight: 900;
color: #ffffff;
font-family: Roboto, Arial, sans-serif;
line-height: .8;
text-transform: uppercase;
text-align: center;
align: center;
/*REMOVE THIS*/
@media (max-width: 675px){
h1,h2,h3,h4{
font-size: 14pt;
font-weight: 50;
}
/*REMOVE THIS*/
}
Line 385
/*REMOVE THIS*/
.navbar-brand {
@media (max-width: 767px){
h1,h2,h3,h4{
font-size: 14pt
}
}
}
/*REMOVE THIS*/0 -
Daniel,
Thank you so much, this worked!! The header text is now responsive. I'm so close to this being finished! My only issue now is that the responsive code is broken in the alert contact fields and messge. I'm not sure what's causing the problem – I uploaded using the kit again and encountered the same issue. Do you know what might be causing this problem?
https://secure2.convio.net/clf/site/Advocacy?cmd=display&page=UserAction&id=519
Again, thank you so much for your help, you are a lifesaver!!
Best,
SydneyDaniel Hartanto:
Looks like you have your <style> embedded within the PageWrapper "Additional HTML tags for HEAD Element", and I did see some of media queries reference been made on the header, although they might be made incorrectly (i.e. line 385, the way you wrap the media queries inside of targetted class element .navbar-brand I think that's not correct (you have it the other way around, refer to below for correct one)
view-source:https://secure2.convio.net/clf/site/Advocacy?cmd=display&page=UserAction&id=519
you may want to paste this into the existing <style> tag
@media (max-width: 699px){
h1.navbar-brand {
font-size: 5em;
}
}
@media (max-width: 499px){
h1.navbar-brand {
font-size: 2.7em;
}
}
The coloring is just to show how to wrap the CSS inside of the media queries
You might want to make sure that there is no duplicate on the breakpoint, or better put this at the end of your style tag before the closing </style>
regards,
DanielSydney Moyer:
Thanks Daniel! Forgive my lack of awareness on media queries, but do you know where I ought to put them? Should they just go under the class of the block of text I’m styling in the stylesheet? Or do they have their own special place in the code?
Appreciate your help!
- Sydney
P.s.
@Erik -- I don't think she' using the responsive stlye css, the file isn't included in hers, but either way, if it's just to resolve the header font-size, she could make do with just the barebones
@Sydney --
You would want to differentiate the class assignment of your h1.navbar-brand and that image link on the footer which uses the same class while they are actually differents element in nature, (one is an h1 and the other is <a> tag -- assign different class name for either of them, don't use the same, or else the CSS ruleset is going to conflict one another inadvertently)
you need to clean up that invalid @media queries line within your .navbar-brand selector on your <style>
like for example - line 186 (remove the highlighted red -- that's not valid CSS)
.navbar-brand{
float:none;
margin:0 auto;
height:auto;
max-width:80%;
font-size: 7em;
font-weight: 900;
color: #ffffff;
font-family: Roboto, Arial, sans-serif;
line-height: .8;
text-transform: uppercase;
text-align: center;
align: center;
/*REMOVE THIS*/
@media (max-width: 675px){
h1,h2,h3,h4{
font-size: 14pt;
font-weight: 50;
}
/*REMOVE THIS*/
}
Line 385
/*REMOVE THIS*/
.navbar-brand {
@media (max-width: 767px){
h1,h2,h3,h4{
font-size: 14pt
}
}
}
/*REMOVE THIS*/0 -
Hi Sydney,
You are always welcome, and always glad to help.
I might need further clarification / direction from you regarding that "broken alert contact fields and message", what do you mean by that? any screengrab, further description of the issue would probably be helpful in this case. Let us know.
regards,
DanielSydney Moyer:
Daniel,
Thank you so much, this worked!! The header text is now responsive. I'm so close to this being finished! My only issue now is that the responsive code is broken in the alert contact fields and messge. I'm not sure what's causing the problem – I uploaded using the kit again and encountered the same issue. Do you know what might be causing this problem?
https://secure2.convio.net/clf/site/Advocacy?cmd=display&page=UserAction&id=519
Again, thank you so much for your help, you are a lifesaver!!
Best,
Sydney0 -
Thanks so much Daniel! A screenshot is below. Basically, the page is responsive, but the "Contact" Column with input fields should be stacking in a single-column format on top of the "Message" section, but they're instead stacking side-by-side, which makes the content hard to read on mobile. The original kit setup had these two elements stacking correctly, so I'm not sure what I've done in modifying the header and background that broke the responsiveness for these two sections below it. Thanks for any insight you may have!
- Sydney
0 -
Hi Sydney,
No your modifying the header CSS shouldn't have anything to do with the mobile stacking. That mobile stacking of the 2 column is what Erik was referring to as it might seems that you have not really include all the CSS files that the kit might have come with (i.e. that advocacy_responsive_css.css file that seems to be missing/not included) from your wrapper last time I viewed whether that could be intentional since you want to write your own custom CSS or inadvertent.
But regardless, you might not need that CSS file if what you intend to do is just to have them stack, you could just paste this following CSS that basically tells at 699px max screen width and below, remove the float and make sure those DIV fill out the width of the entire screen / parent wrapper -- you could paste this at the same inline style you already have just put them at bottom
@media (max-width:699px){
#action-alert #column1{
float:none;
clear:both;
width:100% !important;
}
#action-alert #column2{
float:none;
clear:both;
width:100% !important;
}
}
With that, you now see the possibility of creating your own CSS overwrite (if coding is what you might have been thinking of doing in future) -- and this could be a good primer on the CSS portion of what we have been talking/discussing here
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
regards,
DanielSydney Moyer:
Thanks so much Daniel! A screenshot is below. Basically, the page is responsive, but the "Contact" Column with input fields should be stacking in a single-column format on top of the "Message" section, but they're instead stacking side-by-side, which makes the content hard to read on mobile. The original kit setup had these two elements stacking correctly, so I'm not sure what I've done in modifying the header and background that broke the responsiveness for these two sections below it. Thanks for any insight you may have!
- Sydney1 -
Daniel,
That worked! Thank you so much for all your help in getting this up and running, it looks fantastic! And I'm learning a bit about media queries and responsive CSS. Appreciate all your help with this!
Best,
Sydney1 -
Sidney, one thing that you need to correct on your CSS
do not put that inside of another media queries
(line 287 from view-source:https://secure2.convio.net/clf/site/Advocacy?cmd=display&page=UserAction&id=519)
You are currently putting the entire @media (max-width:699px){...} inside of another @media (max-width:499px){..} that's wrong -- each of media queries should be on their own thus it's always important to check the closing of the @media curly bracket.
Important -- You need to fix that otherwise, it might not behave correctly in some / most browsers.
regards,
Daniel
EDIT:
those should be
@media (max-width: 499px){
h1.navbar-brand {
font-size: 2.7em;
}
}
@media (max-width:699px){
#action-alert #column1{
float:none;
clear:both;
width:100% !important;
}
#action-alert #column2{
float:none;
clear:both;
width:100% !important;
}
}
OR if you want the entire thing to be stacking not at 699px width but at 499px width, then you don't need to include the @media (max-width:699px){ } rather, just copy paste the "content" of that originally 699px media queries to 499px media queries, so it looks like this:
@media (max-width: 499px){
h1.navbar-brand {
font-size: 2.7em;
}
#action-alert #column1{
float:none;
clear:both;
width:100% !important;
}
#action-alert #column2{
float:none;
clear:both;
width:100% !important;
}
}Sydney Moyer:
Daniel,
That worked! Thank you so much for all your help in getting this up and running, it looks fantastic! And I'm learning a bit about media queries and responsive CSS. Appreciate all your help with this!
Best,
Sydney0 -
Oh thank you! I'll fix that now. Thanks for your help!
Daniel Hartanto:
Sidney, one thing that you need to correct on your CSS
do not put that inside of another media queries
(line 287 from view-source:https://secure2.convio.net/clf/site/Advocacy?cmd=display&page=UserAction&id=519)
You are currently putting the entire @media (max-width:699px){...} inside of another @media (max-width:499px){..} that's wrong -- each of media queries should be on their own thus it's always important to check the closing of the @media curly bracket.
Important -- You need to fix that otherwise, it might not behave correctly in some / most browsers.
regards,
Daniel
EDIT:
those should be
@media (max-width: 499px){
h1.navbar-brand {
font-size: 2.7em;
}
}
@media (max-width:699px){
#action-alert #column1{
float:none;
clear:both;
width:100% !important;
}
#action-alert #column2{
float:none;
clear:both;
width:100% !important;
}
}
OR if you want the entire thing to be stacking not at 699px width but at 499px width, then you don't need to include the @media (max-width:699px){ } rather, just copy paste the "content" of that originally 699px media queries to 499px media queries, so it looks like this:
@media (max-width: 499px){
h1.navbar-brand {
font-size: 2.7em;
}
#action-alert #column1{
float:none;
clear:both;
width:100% !important;
}
#action-alert #column2{
float:none;
clear:both;
width:100% !important;
}
}Sydney Moyer:
Daniel,
That worked! Thank you so much for all your help in getting this up and running, it looks fantastic! And I'm learning a bit about media queries and responsive CSS. Appreciate all your help with this!
Best,
Sydney0 -
You are always welcome there
all looks good now
Sydney Moyer:
Oh thank you! I'll fix that now. Thanks for your help!0
Categories
- All Categories
- Shannon parent
- shannon 2
- shannon 1
- 21 Advocacy DC Users Group
- 14 BBCRM PAG Discussions
- 89 High Education Program Advisory Group (HE PAG)
- 28 Luminate CRM DC Users Group
- 8 DC Luminate CRM Users Group
- Luminate PAG
- 5.9K Blackbaud Altru®
- 58 Blackbaud Award Management™ and Blackbaud Stewardship Management™
- 409 bbcon®
- 2.1K Blackbaud CRM™ and Blackbaud Internet Solutions™
- donorCentrics®
- 1.1K Blackbaud eTapestry®
- 2.8K Blackbaud Financial Edge NXT®
- 1.1K Blackbaud Grantmaking™
- 527 Education Management Solutions for Higher Education
- 1 JustGiving® from Blackbaud®
- 4.6K Education Management Solutions for K-12 Schools
- Blackbaud Luminate Online & Blackbaud TeamRaiser
- 16.4K Blackbaud Raiser's Edge NXT®
- 4.1K SKY Developer
- 547 ResearchPoint™
- 151 Blackbaud Tuition Management™
- 61 everydayhero
- 3 Campaign Ideas
- 58 General Discussion
- 115 Blackbaud ID
- 87 K-12 Blackbaud ID
- 6 Admin Console
- 949 Organizational Best Practices
- 353 The Tap (Just for Fun)
- 235 Blackbaud Community Feedback Forum
- 55 Admissions Event Management EAP
- 18 MobilePay Terminal + BBID Canada EAP
- 36 EAP for New Email Campaigns Experience in Blackbaud Luminate Online®
- 109 EAP for 360 Student Profile in Blackbaud Student Information System
- 41 EAP for Assessment Builder in Blackbaud Learning Management System™
- 9 Technical Preview for SKY API for Blackbaud CRM™ and Blackbaud Altru®
- 55 Community Advisory Group
- 46 Blackbaud Community Ideas
- 26 Blackbaud Community Challenges
- 7 Security Testing Forum
- 3 Blackbaud Staff Discussions
- 1 Blackbaud Partners Discussions
- 1 Blackbaud Giving Search™
- 35 EAP Student Assignment Details and Assignment Center
- 39 EAP Core - Roles and Tasks
- 59 Blackbaud Community All-Stars Discussions
- 20 Blackbaud Raiser's Edge NXT® Online Giving EAP
- Diocesan Blackbaud Raiser’s Edge NXT® User’s Group
- 2 Blackbaud Consultant’s Community
- 43 End of Term Grade Entry EAP
- 92 EAP for Query in Blackbaud Raiser's Edge NXT®
- 38 Standard Reports for Blackbaud Raiser's Edge NXT® EAP
- 12 Payments Assistant for Blackbaud Financial Edge NXT® EAP
- 6 Ask an All Star (Austen Brown)
- 8 Ask an All-Star Alex Wong (Blackbaud Raiser's Edge NXT®)
- 1 Ask an All-Star Alex Wong (Blackbaud Financial Edge NXT®)
- 6 Ask an All-Star (Christine Robertson)
- 21 Ask an Expert (Anthony Gallo)
- Blackbaud Francophone Group
- 22 Ask an Expert (David Springer)
- 4 Raiser's Edge NXT PowerUp Challenge #1 (Query)
- 6 Ask an All-Star Sunshine Reinken Watson and Carlene Johnson
- 4 Raiser's Edge NXT PowerUp Challenge: Events
- 14 Ask an All-Star (Elizabeth Johnson)
- 7 Ask an Expert (Stephen Churchill)
- 2025 ARCHIVED FORUM POSTS
- 322 ARCHIVED | Financial Edge® Tips and Tricks
- 164 ARCHIVED | Raiser's Edge® Blog
- 300 ARCHIVED | Raiser's Edge® Blog
- 441 ARCHIVED | Blackbaud Altru® Tips and Tricks
- 66 ARCHIVED | Blackbaud NetCommunity™ Blog
- 211 ARCHIVED | Blackbaud Target Analytics® Tips and Tricks
- 47 Blackbaud CRM Higher Ed Product Advisory Group (HE PAG)
- Luminate CRM DC Users Group
- 225 ARCHIVED | Blackbaud eTapestry® Tips and Tricks
- 1 Blackbaud eTapestry® Know How Blog
- 19 Blackbaud CRM Product Advisory Group (BBCRM PAG)
- 1 Blackbaud K-12 Education Solutions™ Blog
- 280 ARCHIVED | Mixed Community Announcements
- 3 ARCHIVED | Blackbaud Corporations™ & Blackbaud Foundations™ Hosting Status
- 1 npEngage
- 24 ARCHIVED | K-12 Announcements
- 15 ARCHIVED | FIMS Host*Net Hosting Status
- 23 ARCHIVED | Blackbaud Outcomes & Online Applications (IGAM) Hosting Status
- 22 ARCHIVED | Blackbaud DonorCentral Hosting Status
- 14 ARCHIVED | Blackbaud Grantmaking™ UK Hosting Status
- 117 ARCHIVED | Blackbaud CRM™ and Blackbaud Internet Solutions™ Announcements
- 50 Blackbaud NetCommunity™ Blog
- 169 ARCHIVED | Blackbaud Grantmaking™ Tips and Tricks
- Advocacy DC Users Group
- 718 Community News
- Blackbaud Altru® Hosting Status
- 104 ARCHIVED | Member Spotlight
- 145 ARCHIVED | Hosting Blog
- 149 JustGiving® from Blackbaud® Blog
- 97 ARCHIVED | bbcon® Blogs
- 19 ARCHIVED | Blackbaud Luminate CRM™ Announcements
- 161 Luminate Advocacy News
- 187 Organizational Best Practices Blog
- 67 everydayhero Blog
- 52 Blackbaud SKY® Reporting Announcements
- 17 ARCHIVED | Blackbaud SKY® Reporting for K-12 Announcements
- 3 Luminate Online Product Advisory Group (LO PAG)
- 81 ARCHIVED | JustGiving® from Blackbaud® Tips and Tricks
- 1 ARCHIVED | K-12 Conference Blog
- Blackbaud Church Management™ Announcements
- ARCHIVED | Blackbaud Award Management™ and Blackbaud Stewardship Management™ Announcements
- 1 Blackbaud Peer-to-Peer Fundraising™, Powered by JustGiving® Blogs
- 39 Tips, Tricks, and Timesavers!
- 56 Blackbaud Church Management™ Resources
- 154 Blackbaud Church Management™ Announcements
- 1 ARCHIVED | Blackbaud Church Management™ Tips and Tricks
- 11 ARCHIVED | Blackbaud Higher Education Solutions™ Announcements
- 7 ARCHIVED | Blackbaud Guided Fundraising™ Blog
- 2 Blackbaud Fundraiser Performance Management™ Blog
- 9 Foundations Events and Content
- 14 ARCHIVED | Blog Posts
- 2 ARCHIVED | Blackbaud FIMS™ Announcement and Tips
- 59 Blackbaud Partner Announcements
- 10 ARCHIVED | Blackbaud Impact Edge™ EAP Blogs
- 1 Community Help Blogs
- Diocesan Blackbaud Raiser’s Edge NXT® Users' Group
- Blackbaud Consultant’s Community
- Blackbaud Francophone Group
- 1 BLOG ARCHIVE CATEGORY
- Blackbaud Community™ Discussions
- 8.3K Blackbaud Luminate Online® & Blackbaud TeamRaiser® Discussions
- 5.7K Jobs Board