[Support request] CSS doesn't update in customizer, but does when I use plugin – why is this?

[James]

When I enter

.main-title {
  text-shadow: 1px 2px 0px white;
  
}

In the customizer, it doesn’t work. However, when I use a CSS plugin (name removed by OP), the changes work (using the exact same code. Why is this?

I’m using GP Premium with the “Sider” site.

[James]

??

[David]

Hi there,

can you provide a link to your Site so i can take a look?
You can edit your original topic and use the Site URL to share your link privately.

[James]

Hi David. The site is password protected at the moment.

I guess I’m just asking in theory? Does the code embedded within the “Sider” site of the GP Premium theme have a particular code that makes it difficult to edit within customizer? The code is below:

.cat-title {
display: none;
}/* GeneratePress Site CSS */ @media (min-width: 1000px) {
	body {
		padding: 0 0px 50px;
		margin-left: 290px;
	}

	.site-header {
		position: fixed;
		left: 0;
		top: 0;
		width: 290px;
		z-index: 300;
		height: 100%;
		overflow: auto;
		overflow-x: hidden;
		-webkit-backface-visibility: hidden;
		-webkit-overflow-scrolling: touch;
		transition: .1s ease;
	}
	
	.admin-bar .site-header {
		top: 32px;
	}
	
	.site-header .main-navigation li {
		float: none;
	}
}

.inside-header {
	display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
	margin-top: -40px;
}

.site-branding,
.site-logo {
	order: 1;
}

.header-widget {
	order: 3;
}

.nav-float-right .inside-header .main-navigation {
	order: 2;
	float: none;
	margin-top: 75px;
	margin-bottom: 50px;
}

.nav-float-right .header-widget {
	float: none;
	top: auto;
	max-width: 100%;
	margin-left: 20px
}

.dropdown-click .site-header .main-navigation ul ul {
    position: relative;
}

a.button,
a.button:visited,
button,
input[type="submit"] {
	border-width: 1px;
	border-style: solid;
	border-color: inherit;
}

.mc4wp-form-fields input {
	margin-bottom: 10px;
	width: 100%;
	text-align: center;
}

.main-navigation.toggled .main-nav li {
	text-align: center !important;
}

::-webkit-input-placeholder {
	font-size: 14px;
}

::-moz-placeholder {
	font-size: 14px;
}

:-ms-input-placeholder {
	font-size: 14px;
}

:-moz-placeholder {
	font-size: 14px;
}

.no-sidebar:not(.archive):not(.blog) .inside-article > *, 
.no-sidebar:not(.archive):not(.blog) #comments,
.no-sidebar:not(.archive):not(.blog) .paging-navigation {
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 768px) {
	.separate-containers .site-main {
		margin-top: 20px;
		margin-bottom: 0;
	}
	
	.post {
		margin-bottom: 20px;
	}
	
	.nav-float-right .inside-header .main-navigation {
		margin-top: 0;
	}

[Leo]

I’m not seeing the CSS here:
https://generatepress.com/forums/topic/css-doesnt-update-in-customizer-but-does-when-i-use-plugin-why-is-this/#post-1182808

In the full CSS here?
https://generatepress.com/forums/topic/css-doesnt-update-in-customizer-but-does-when-i-use-plugin-why-is-this/#post-1182864

This really isn’t something that we can look at the code and figure out. Any chance we can see the site in question with the CSS added?

I also noticed you are missing a closing bracket } for the last media query @media (max-width: 768px)

[James]

Hi Leo.

The reason is because I copied the CSS that you can see directly from the Customizer. The plugin I’m using from the WP plugin “store” is adding the CSS in its own section. This is what I’ve added:

.main-title {
  text-shadow: 1px 2px 0px #CED8F6;
}

.site-description {
  font-weight: bold;
  text-shadow: 1px 1px 0px #CED8F6;
}

.top-bar .inside-top-bar .textwidget p:last-child {
  color: #000000;
  font-size: 40px;
  text-align: center;
  text-transform: none;
  font-weight: bold;
  margin: -100px;
  line-height: 48px;
  padding-top: 50px;
  text-shadow: 1px 1px 0px #CED8F6;
}

strong {
  text-align: center;
}

.separate-containers .inside-article {
  padding-bottom: 0px;
  box-shadow: 1px 1px 8px #D8D8D8;
}

#primary.content-area.grid-parent.mobile-grid-100.grid-100.tablet-grid-100 {
  margin: 30px;
}

.separate-containers .site-main>:last-child {
  margin: 0px;
  margin-right: 90px;
}

.attachment-full.size-full.wp-post-image {
  width: 100%;
}

[Leo]

The CSS all looks good to me so unfortunately we can’t tell why it isn’t working without seeing the site live.

Can we revisit the issue once we have something live to look at?

[James]

Yes for sure. I’ll update then.

Thanks.

[Leo]

Sounds good 🙂

[Author]

Posts