Lindsey G Lindsey G - 27 days ago 14
CSS Question

Wordpress Customizr - change font size in body

I'm using the Customizr theme for Wordpress and I want to have a block of content that includes two different sizes. (Ex: "Visited" would be large, while "March, 2016" would be smaller. Both should be on the same line.)

I can easily set these sizes with "span style", but the problem is that I also want to change the font size in smaller viewports, and using "style" won't let me do that.

So I figured out a code that should work:



p.infobox-large{
font-size: 30px;
float: left;
line-height: 35%
}
p.infobox-small{
font-size: 17px;
line-height: 450%
}

<p class="infobox-large">Visited &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</p><p class="infobox-small">March, 2016</p>

<p class="infobox-large">Where &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</p><p class="infobox-small">Madrid, Toledo, Consuegra, Granada</p>

<p class="infobox-large">English? &nbsp; &nbsp; &nbsp; &nbsp;</p><p class="infobox-small">Not much! Brush up on your Spanish!</p>

<p class="infobox-large">Thoughts &nbsp; &nbsp; &nbsp;</p><p class="infobox-small">Laid-back atmosphere, friendly people</p>





But then when I put it into my website, all of the text is the same size. Is something conflicting with the theme's coding? Or am I doing something wrong?

For reference, here's the page: http://anotherredpin.com/spain/

Answer

your css is overright by other css use below code this should work

#dslc-module-12 .dslc-text-module-content p.infobox-large{
 font-size: 30px; 
 float: left;
}
#dslc-module-12 .dslc-text-module-content p.infobox-small{
  font-size: 17px;
}

and for small screen device

@media only screen and (max-width: 1200px) {
   #dslc-module-12 .dslc-text-module-content p.infobox-large{
      font-size: 20px; 
    }
    #dslc-module-12 .dslc-text-module-content p.infobox-small{
      font-size: 15px;
    }
}

u can play with font-size and line-height(in px) as u want

Comments