Only some of my media queries are working for certain sizes

[wrisadmin]

I need the social media icons to fit for the iphone 6 like it does for the iphone x, My media query worked just fine for iphone x but I had to put it in the child theme stylesheet as it didn’t work in the theme options global css

[nabeel]

Hi there,

Thanks for writing in! I checked your media queries and the selector doesn’t look right, you can give your bar ( the bar you’re targeting with CSS ) a class e.g pro-header-topbar and then add the following code in the Theme Options > CSS:

@media screen and (max-width: 767px) {
	.pro-header-topbar {
		/* Your Code Here */
	}
}

Replace /* Your Code Here */ with actual code.

To learn more about media queries please see https://www.w3schools.com/css/css3_mediaqueries_ex.asp
If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Hope this helps!