DEV Community

Khoa Pham
Khoa Pham

Posted on

1 1

Dealing with CSS responsiveness in Wordpress

During the alpha test of LearnTalks, some of my friends reported that the screen is completely blank in the search page, and this happened in mobile only. This article is how I identify the problem and found a workaround for the issue, it may not be the solution, but at least the screen does not appear blank anymore.

As someone who likes to keep up with tech via watching conference videos, I thought it might be a good idea to collect all of these to better search and explore later. So I built a web app with React and Firebase, it is a work in progress for now. Due to time constraints, I decided to go first with Wordpress to quickly play with the idea. So there is LearnTalks.

The theme Marinate that I used didn’t want to render the search page correctly. So I head over to Chrome Dev Tool for Responsive Viewport Mode and Safari for Web Inspector

a1

a2

The tests showed that the problem only happened on certain screen resolutions. This must be due to CSS @media query which displays different layouts for different screen sizes. And somehow it didn’t work for some sizes.

@media screen and (max-width: 800px) {
 #site-header {
 display: none;
 }
}

A bit about the rules

The @media rule is used in media queries to apply different styles for different media types/devices.

Media queries can be used to check many things, such as:

width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution
Using media queries are a popular technique for delivering a tailored style sheet (responsive web design) to desktops, laptops, tablets, and mobile phones.

So I go to Wordpress Dashboard -> Appearance -> Editor to examine CSS files. Unsurprisingly, there are a bunch of media queries

@media (min-width: 600px) and (max-width: 767px) {
 .main-navigation {
 padding: 0;
 }
 .site-header .pushmenu {
 margin-top:0px; 
 } 
 .social-networks li a {
 line-height:2.1em !Important; 
 } 
 .search {
 display: none !important;
 }
 .customer blockquote {
 padding: 10px;
 text-align: justify;
 }
}

The .search selector is suspicious display: none !important;

The important directive is, well, quite important

It means, essentially, what it says; that ‘this is important, ignore subsequent rules, and any usual specificity issues, apply this rule!’

In normal use, a rule defined in an external stylesheet is overruled by a style defined in the head of the document, which, in turn, is overruled by an in-line style within the element itself (assuming equal specificity of the selectors). Defining a rule with the !important 'attribute' (?) discards the normal concerns as regards the 'later' rule overriding the 'earlier' ones.

Luckily, this theme allows the ability to Edit CSS, so I can override that to a block attribute to always show search page

a3

Original post https://github.com/onmyway133/blog/issues/208

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay