-
Posts
-
Hi there,
Ive added/installed Bebas from fontsquirrel to use to change my headings in some places. In particular ive tweaked h6 (in my enfold css file) to use for a huge slab text heading (something like 70px). The text itself ive added as normal through the text layout tool however, its not being responsive when I scale down the page. What do I need to do?
Cheers
Hi andypeck,
You would need to add a media query to your custom.css file (in the theme’s css folder) to then target the h6 and change the font-size declaration.
You can add this to your custom.css file and use it as a starting point to add in your css for each screen size you want to change the css on:
/* #Media Queries
================================================== */
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}Regards,
Devin
Hi Devin,
Thanks for your help although I think there’s a bit in the middle im missing….
Ive installed Bebas Neue and have it working as an h6 heading on a standard page layout. However, as discussed when I shrink the page the h6 header remains the same. I merely added your text to the CSS but cant see how to link the h6 to your code thus nothing has happened. What do I need to do to link your code and would I need to do it for every h tag (h2,h3 etc) if I wanted to change other headings too
My CSS is setup as follows:
@font-face {
font-family: ‘BebasNeueRegular’;
src: url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot’);
src: url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.woff’) format(‘woff’),
url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.ttf’) format(‘truetype’),
url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.svg#BebasNeueRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
h6 {
font-family: BebasNeueRegular, Geneva, Arial, Helvetica, sans-serif !important;
font-size: 90pt !important;
letter-spacing: -0.0em !important;
font-weight:200 !important;
}
Hi,
For example, you want to apply the style when viewing on a mobile device, you should use this
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
@font-face {
font-family: 'BebasNeueRegular';
src: url('http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot');
src: url('http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.woff') format('woff'),
url('http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.ttf') format('truetype'),
url('http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
h6 {
font-family: BebasNeueRegular, Geneva, Arial, Helvetica, sans-serif !important;
font-size: 90pt !important;
letter-spacing: -0.0em !important;
font-weight:200 !important;
}
}The font will only apply if the user is viewing on a mobile device.
Regards,
Ismael
BIG BIG thanks… Although it seems rather long winded for one heading. Would there be a short-hand version or a better way to write this:
SEE BELOW…..
/* DECLARE FONTS */
@font-face {
font-family: ‘BebasNeueRegular’;
src: url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot’);
src: url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.woff’) format(‘woff’),
url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.ttf’) format(‘truetype’),
url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.svg#BebasNeueRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
h6 {
font-family: BebasNeueRegular, Geneva, Arial, Helvetica, sans-serif !important;
font-size: 95pt !important;
margin-bottom: -20px !important;
letter-spacing: -0.0em !important;
font-weight:200 !important;
}
/* #Media Queries
========================================================================================== */
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
@font-face {
font-family: ‘BebasNeueRegular’;
src: url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot’);
src: url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.woff’) format(‘woff’),
url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.ttf’) format(‘truetype’),
url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.svg#BebasNeueRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
h6 {
font-family: BebasNeueRegular, Geneva, Arial, Helvetica, sans-serif !important;
font-size: 80pt !important;
margin-bottom: 20px !important;
letter-spacing: -0.0em !important;
font-weight:200 !important;
}
}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
@font-face {
font-family: ‘BebasNeueRegular’;
src: url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot’);
src: url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.woff’) format(‘woff’),
url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.ttf’) format(‘truetype’),
url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.svg#BebasNeueRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
h6 {
font-family: BebasNeueRegular, Geneva, Arial, Helvetica, sans-serif !important;
font-size: 70pt !important;
margin-bottom: -15px !important;
letter-spacing: -0.0em !important;
font-weight:200 !important;
}
}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
@font-face {
font-family: ‘BebasNeueRegular’;
src: url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot’);
src: url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.woff’) format(‘woff’),
url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.ttf’) format(‘truetype’),
url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.svg#BebasNeueRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
h6 {
font-family: BebasNeueRegular, Geneva, Arial, Helvetica, sans-serif !important;
font-size: 60pt !important;
margin-bottom: -20px !important;
letter-spacing: -0.0em !important;
font-weight:200 !important;
}
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
@font-face {
font-family: ‘BebasNeueRegular’;
src: url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot’);
src: url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.woff’) format(‘woff’),
url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.ttf’) format(‘truetype’),
url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.svg#BebasNeueRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
h6 {
font-family: BebasNeueRegular, Geneva, Arial, Helvetica, sans-serif !important;
font-size: 80pt !important;
margin-bottom: -20px !important;
letter-spacing: -0.0em !important;
font-weight:200 !important;
}
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
@font-face {
font-family: ‘BebasNeueRegular’;
src: url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot’);
src: url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.woff’) format(‘woff’),
url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.ttf’) format(‘truetype’),
url(‘http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.svg#BebasNeueRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
h6 {
font-family: BebasNeueRegular, Geneva, Arial, Helvetica, sans-serif !important;
font-size: 50pt !important;
margin-bottom: -10px !important;
letter-spacing: -0.0em !important;
font-weight:200 !important;
}
}
Hi,
It depends on what device you are trying to target. You only need this if you’re trying to target screens with 959px resolution and lower that includes iPad, iPhone and other mobile devices.
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
@font-face {
font-family: 'BebasNeueRegular';
src: url('http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot');
src: url('http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.woff') format('woff'),
url('http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.ttf') format('truetype'),
url('http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
h6 {
font-family: BebasNeueRegular, Geneva, Arial, Helvetica, sans-serif !important;
font-size: 80pt !important;
margin-bottom: 20px !important;
letter-spacing: -0.0em !important;
font-weight:200 !important;
}
}Regards,
Ismael
Hi,
Since you are using the font in all screen sizes there is no need to load it in each of the media queries. Only indicate the changes for that specific query without repeating yourself.
so you would have
/* DECLARE FONTS */
@font-face {
font-family:'BebasNeueRegular';
src:url('http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot');
src:url('http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),url('http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.woff') format('woff'),url('http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.ttf') format('truetype'),url('http://localhost:8888/wordpress/wp-content/themes/enfold-child/fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight:normal;
font-style:normal;
}
h6 {
font-family:BebasNeueRegular,Geneva,Arial,Helvetica,sans-serif !important;
font-size:95pt;
margin-bottom:-20px;
letter-spacing:-0.0em !important;
font-weight: 200 !important;
}
/* #Media Queries========================================================================================== */
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width:959px) {
h6 {
font-size:80pt !important;
margin-bottom: 20px !important;
}
}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width:768px) and (max-width:959px) {
h6 {
font-size:70pt !important;
margin-bottom: -15px !important;
}
}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width:767px) {
h6 {
font-size:60pt !important;
margin-bottom: -20px !important;
}
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width:480px) and (max-width:767px) {
h6 {
font-size:80pt !important;
margin-bottom: -20px !important;
}
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width:479px) {
h6 {
font-size:50pt !important;
margin-bottom: -10px !important;
}
}Be careful when using a very broad selector like h6, it has no specificity and is defined many times in the theme with much higher specificity which will override/counterfeit your code very easily.
You also do not need this block … @media only screen and (max-width:767px) { …or this block ….@media only screen and (max-width:959px) { …. can you think of one screen size where the blocks of code below it aren’t already targeting it? the only reason for 767 that i can think of is for the dropdown menu for all small screens, but 959…. dont know
Thanks,
Nick
hi there,
thanks for all the suggestions and yes im aware that I might be messing up something else by using h6 for my slab text. Other than not using slab text can you suggest one of the h tags thats not really used or another, safer way to get large slab text into my design. I dont want to ruin the aesthetic of this lovely theme. Im sure theres a better way without me having to carve up such code for what is essentially half a dozen big slabs of text. I had wondered if I just use a graphic but it seems a bit of a cop out
I welcome suggestions
Andy
Hi,
put them in a div and give each a class leaving h6
<h6 class="slab-text">Slab 1</h6>then use the last css I posted above, but change all…
h6 {…to
h6.slab-text {Thanks,
Nick
- The topic ‘Enfold – Making Slab text headings responsive’ is closed to new replies.