Tagged: , ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • September 18, 2014 at 8:48 pm #321475
    Netzie

    Hi, I am just trying to add text to a color section. I have added a code block to the color section and added this code:

    <p align="center" style="font-family: oswald, Roboto, Arial, Verdana, Helvetica, sans-serif; font-size: 44px; color:#fff;">Hav en:</p>
<p align="center" style="font-family: oswald, Roboto, Arial, Verdana, Helvetica, sans-serif; font-size: 90px; color:#fff;">GOD DAG</p>
<p align="center"><img src="http://god-dag.dk/wp-content/uploads/2014/09/contact-symbol.png" width="151" height="205"></p>
<p align="center" style="font-family: oswald, Roboto, Arial, Verdana, Helvetica, sans-serif; font-size: 34px; color:#fff;">T. +45 33 37 99 90   /   M.  (Email address hidden if logged out) </p>
<p align="center" style="font-family: oswald, Roboto, Arial, Verdana, Helvetica, sans-serif; font-size: 17px; color:#fff;">God Dag  Elleparken 3   2950 Trørød   CVR nr. 30880412</p>

    Do I have to add something to make the text responsive. I can’t think of any other way to just get a simple section with a color background and text only :-(
    LINK:See bottom of the frontpage: God-Dag.dk

    • This topic was modified 10 years, 3 months ago by Netzie.
    September 19, 2014 at 11:41 pm #322156
    Josue

    Hi Peter!

    I’d suggest refactoring your code to something like this:

    <p align="center" class="first_text">Hav en:</p>
<p align="center" class="second_text">GOD DAG</p>
<p align="center"><img src="http://god-dag.dk/wp-content/uploads/2014/09/contact-symbol.png" width="151" height="205"></p>
<p align="center" class="third_text">T. +45 33 37 99 90   /   M.  (Email address hidden if logged out) </p>
<p align="center" class="fourth_text">God Dag  Elleparken 3   2950 Trørød   CVR nr. 30880412</p>

    That way you can target each text individually via CSS and change them depending on the screen size with media queries:

    .first_text{
	font-size: 40px; color: red; font-family: oswald, Roboto, Arial, Verdana, Helvetica, sans-serif; 
}
.second_text{
	font-size: 30px;	
}
.third_text{
	font-size: 20px;
}
.fourth_text{
	font-size: 10px;
}

/* Mobile */
@media only screen and (max-width: 767px) {
	.first_text{
		font-size: 30px;
	}
	.second_text{
		font-size: 20px;	
	}
	.third_text{
		font-size: 10px;
	}
	.fourth_text{
		font-size: 10px;
	}
}

    Modify as needed.

    Cheers!
    Josue

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.