Support » Theme: OceanWP » Changing default media queries

  • Hi

    I have a client that have used the ‘Customize > Typgraphy’ tabs, to create general styling for the headers. All this works fine, and we set different font-size/line-height for iPad/Mobile. However, the default breakpoints isn’t satisfactory, so we would want to change them (currently: iPad = max 768px, phone = max 480px), to something like (iPad = 1024px, phone = 768px)

    I considered simply overwriting the css myself, however the style.css file (id=”wp-custom-css”) makes a normal h1 styling, then a h1 @ media (max-width:768px) and then a h1 @ media (max-width:480px). This means 3 seperate styling PER element that is changed in typography.


    h1 {
    	font-family: Droid Serif;
    	font-weight: 400;
    	font-style: italic;
    	font-size: 55px;
    	color: #32322d
    @media (max-width: 768px) {
    	h1 {
    		line-height: 1.4
    @media (max-width: 480px) {
    	h1 {
    		line-height: 1.5

    Is there another way to do this? Like editing a child-theme’s function or something, so we’re able to set a general iPad/mobile breakpoint, that is defined whenever we change something in ‘Appereance > Customize’

    Thanks for helping,

Viewing 2 replies - 1 through 2 (of 2 total)
  • I’ve done some more digging, and found that I can change it in inc/customizer/settings/typography.php. However, this will only affect my parent theme, and it’s a bit messy to change (my client prefers to change things himself). Can it be done in any easier way?


    The typography settings of the customizer will work for all the pages/posts. I didn’t understand – ‘this will only affect my parent theme’, can you please explain it more?
    You can control all the settings from the customizer > typography section easily.

    • This reply was modified 4 months, 3 weeks ago by  Amit Singh.
Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.