Responsive Text Size Code

Daniel 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,

Daniel

Sydney 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*/

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,

Sydney