{"id":26533,"date":"2022-12-18T09:33:29","date_gmt":"2022-12-18T04:03:29","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-my-class-selector-is-not-displayed-in-rules-in-firefox\/"},"modified":"2022-12-18T09:33:29","modified_gmt":"2022-12-18T04:03:29","slug":"solved-my-class-selector-is-not-displayed-in-rules-in-firefox","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-my-class-selector-is-not-displayed-in-rules-in-firefox\/","title":{"rendered":"[Solved] My class selector is not displayed in rules in Firefox"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div id=\"answer-43138336\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"43138336\" data-parentid=\"43137978\" data-score=\"1\" data-position-on-page=\"1\" data-highest-scored=\"1\" data-question-has-accepted-highest-score=\"1\" itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n<div class=\"post-layout\">\n<div class=\"votecell post-layout--left\"><\/div>\n<div class=\"answercell post-layout--right\">\n<div class=\"s-prose js-post-body\" itemprop=\"text\">\n<p>your .container class is getting applied. The problem is that your .project class container completely covers the parent container i.e. .container. Add padding to .container class or reduce width of .map class to below 100%, to see it work. You can do it like so &#8211; <\/p>\n<pre><code>.container {\n  width: 1400px;\n  margin: 0 auto;\n  background-color: blue;\n  padding: 20px;\n}\n\n.project {\n  background: red;\n  width: 100%;\n}\n.map {\n  width: 90%;\n }\n<\/code><\/pre>\n<p>Also its generally a bad idea to hard code height. To make your page responsive, prefer dynamic width i.e. in % for example rather than in pixels.<br \/>\nHope it helps<\/p>\n<\/p><\/div>\n<div class=\"mt24\"><\/div>\n<\/div>\n<p>            <span class=\"d-none\" itemprop=\"commentCount\">1<\/span> <\/p><\/div>\n<\/div>\n<p>[ad_2]<\/p>\n<p>solved My class selector is not displayed in rules in Firefox <\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] your .container class is getting applied. The problem is that your .project class container completely covers the parent container i.e. .container. Add padding to .container class or reduce width of .map class to below 100%, to see it work. You can do it like so &#8211; .container { width: 1400px; margin: 0 auto; background-color: &#8230; <a title=\"[Solved] My class selector is not displayed in rules in Firefox\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-my-class-selector-is-not-displayed-in-rules-in-firefox\/\" aria-label=\"More on [Solved] My class selector is not displayed in rules in Firefox\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[464,1950],"class_list":["post-26533","post","type-post","status-publish","format-standard","hentry","category-solved","tag-css","tag-css-selectors"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>[Solved] My class selector is not displayed in rules in Firefox - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-my-class-selector-is-not-displayed-in-rules-in-firefox\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] My class selector is not displayed in rules in Firefox - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] your .container class is getting applied. The problem is that your .project class container completely covers the parent container i.e. .container. Add padding to .container class or reduce width of .map class to below 100%, to see it work. You can do it like so &#8211; .container { width: 1400px; margin: 0 auto; background-color: ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-my-class-selector-is-not-displayed-in-rules-in-firefox\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-18T04:03:29+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-my-class-selector-is-not-displayed-in-rules-in-firefox\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-my-class-selector-is-not-displayed-in-rules-in-firefox\\\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] My class selector is not displayed in rules in Firefox\",\"datePublished\":\"2022-12-18T04:03:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-my-class-selector-is-not-displayed-in-rules-in-firefox\\\/\"},\"wordCount\":100,\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"keywords\":[\"css\",\"css-selectors\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-my-class-selector-is-not-displayed-in-rules-in-firefox\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-my-class-selector-is-not-displayed-in-rules-in-firefox\\\/\",\"name\":\"[Solved] My class selector is not displayed in rules in Firefox - JassWeb\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\"},\"datePublished\":\"2022-12-18T04:03:29+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-my-class-selector-is-not-displayed-in-rules-in-firefox\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-my-class-selector-is-not-displayed-in-rules-in-firefox\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-my-class-selector-is-not-displayed-in-rules-in-firefox\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] My class selector is not displayed in rules in Firefox\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/jass-website-logo-1.png\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777613206\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777613206\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777613206\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\\\/\\\/jassweb.com\"],\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/author\\\/jaspritsinghghumangmail-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] My class selector is not displayed in rules in Firefox - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-my-class-selector-is-not-displayed-in-rules-in-firefox\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] My class selector is not displayed in rules in Firefox - JassWeb","og_description":"[ad_1] your .container class is getting applied. The problem is that your .project class container completely covers the parent container i.e. .container. Add padding to .container class or reduce width of .map class to below 100%, to see it work. You can do it like so &#8211; .container { width: 1400px; margin: 0 auto; background-color: ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-my-class-selector-is-not-displayed-in-rules-in-firefox\/","og_site_name":"JassWeb","article_published_time":"2022-12-18T04:03:29+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-my-class-selector-is-not-displayed-in-rules-in-firefox\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-my-class-selector-is-not-displayed-in-rules-in-firefox\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] My class selector is not displayed in rules in Firefox","datePublished":"2022-12-18T04:03:29+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-my-class-selector-is-not-displayed-in-rules-in-firefox\/"},"wordCount":100,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["css","css-selectors"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-my-class-selector-is-not-displayed-in-rules-in-firefox\/","url":"https:\/\/jassweb.com\/solved\/solved-my-class-selector-is-not-displayed-in-rules-in-firefox\/","name":"[Solved] My class selector is not displayed in rules in Firefox - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-12-18T04:03:29+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-my-class-selector-is-not-displayed-in-rules-in-firefox\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-my-class-selector-is-not-displayed-in-rules-in-firefox\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-my-class-selector-is-not-displayed-in-rules-in-firefox\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] My class selector is not displayed in rules in Firefox"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777613206","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777613206","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777613206","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/26533","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=26533"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/26533\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=26533"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=26533"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=26533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}