Problem with HTML style when using Embed in Rich Text

Hossein_Fakhr · November 21, 2021, 6:53pm

Hi,
I try to add CTA (call to action block) in my blog posts using embedded. But Embed using Rich Text Block style instead of self-style.

Here is the blog post page

Here is my HTML code

<div class="div-block-27"><div class="div-block-29"><h3 class="cta-header">Do have an startup idea?</h3><p class="cta-parapraph">Do you want know more about us and give a free consulting? push to button and contact us.</p></div><div class="div-block-28"><a class="cta-blog-1 w-inline-block" href="#"><div>get in touch</div></a></div></div>

I also tried to add HTML with styles

<!DOCTYPE html>
<html class="w-mod-js w-mod-ix wf-lato-n1-active wf-lato-i1-active wf-lato-n3-active wf-lato-i3-active wf-lato-n4-active wf-lato-i4-active wf-lato-n7-active wf-lato-i7-active wf-lato-n9-active wf-lato-i9-active wf-roboto-n4-active wf-roboto-n5-active wf-roboto-n7-active wf-robotocondensed-n3-active wf-robotocondensed-n4-active wf-robotocondensed-n7-active wf-inter-n3-active wf-inter-n4-active wf-inter-n5-active wf-inter-n6-active wf-inter-n7-active wf-inter-n8-active wf-active" lang="en" data-wf-site="5e233dd1daefb8a4c14bf743" data-wf-page="619a6413af38fef28b48efec" data-wf-domain="sdd-technology.webflow.io">
<head>
<title></title>
<style>
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.div-block-27 {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	margin-bottom: 0px;
	padding-top: 48px;
	padding-bottom: 48px;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.5))),url("https://uploads-ssl.webflow.com/5e233dd1daefb8a4c14bf743/61744943266d4ab7290ce0b3_timelab-pro-sWOvgOOFk1g-unsplash%20(1).jpg");
	background-image: linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.5)),url("https://uploads-ssl.webflow.com/5e233dd1daefb8a4c14bf743/61744943266d4ab7290ce0b3_timelab-pro-sWOvgOOFk1g-unsplash%20(1).jpg");
	background-position: 0 0,50% 50%;
	background-size: auto,auto;
	background-repeat: repeat,no-repeat;
}
.w-embed::after, .w-embed::before {
	content: " ";
	display: table;
	grid-column-start: 1;
	grid-row-start: 1;
	grid-column-end: 2;
	grid-row-end: 2;
}
.w-embed::after {
	clear: both;
}
.blog-post {
	position: relative;
	margin-right: 30px;
	padding-top: 30px;
	padding-right: 15px;
	padding-left: 15px;
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
}
.w-clearfix::after, .w-clearfix::before {
	content: " ";
	display: table;
	grid-column-start: 1;
	grid-row-start: 1;
	grid-column-end: 2;
	grid-row-end: 2;
}
.w-clearfix::after {
	clear: both;
}
.blog-sides {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width: 100%;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.wrapper {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	max-width: 1200px;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 0px;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	background-color: transparent;
}
/* @media screen and (min-width:1920px) */
.wrapper {
	padding-top: 0px;
}
.section {
	position: relative;
	z-index: 1;
	margin-bottom: 0px;
	padding: 128px 4% 0;
	background-color: #151515;
}
.page-wrapper {
	position: relative;
	min-height: 100vh;
	background-color: transparent;
}
body {
	margin: 0;
	min-height: 100%;
	background-color: #151515;
	font-family: Roboto,sans-serif;
	color: #fff;
	font-size: 15px;
	line-height: 24px;
}
html {
	font-family: sans-serif;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	height: 100%;
}
.div-block-29 {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	max-width: 60%;
	padding-left: 34px;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: stretch;
	-webkit-align-items: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
}
.div-block-28 {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	padding-right: 34px;
	padding-left: 34px;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}
a {
	background-color: transparent;
	text-decoration: underline;
}
.w-inline-block {
	max-width: 100%;
	display: inline-block;
}
.cta-blog-1 {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	height: 48px;
	margin-right: 0px;
	margin-left: 0px;
	padding: 12px 24px;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	border-style: none;
	border-radius: 0;
	background-color: #ff7b3e;
	background-image: none;
	-webkit-transition: box-shadow .6s, border-color .6s, color .6s, background-color .6s;
	transition: box-shadow .6s, border-color .6s, color .6s, background-color .6s;
	font-family: "Roboto Condensed",sans-serif;
	color: #fff;
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
	text-align: center;
	letter-spacing: 4px;
	text-decoration: none;
	text-transform: uppercase;
}
h3 {
	margin-top: 0px;
	margin-bottom: 12px;
	font-family: "Roboto Condensed",sans-serif;
	font-size: 38px;
	line-height: 48px;
	font-weight: 400;
}
.cta-header {
	font-size: 38px;
}
p {
	margin-top: 0px;
	margin-bottom: 28px;
	font-size: 14px;
	line-height: 24px;
}
.cta-parapraph {
	margin-right: 0px;
	margin-bottom: 0px;
}
</style>
</head>
<body><div class="page-wrapper"><div class="section wf-section"><div class="wrapper post-wrapper"><div class="blog-sides"><div class="blog-post w-clearfix"><div class="w-embed"><div class="div-block-27"><div class="div-block-29"><h3 class="cta-header">Do have an startup idea?</h3><p class="cta-parapraph">Do you want know more about us and give a free consulting? push to button and contact us.</p></div><div class="div-block-28"><a class="cta-blog-1 w-inline-block" href="#"><div>get in touch</div></a></div></div></div></div></div></div></div></div></body>
</html>

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Siton_Systems · November 22, 2021, 1:01am

First, give semantic names to your classes (instead of div-block-27).

Next, read about css inheritance (Google / Youtube it).

Than add your CTA inside rich-text and inspect the element (See in action why for example “get in touch” text is orange instead of white) - than add more specific selector to fix this.

Hossein_Fakhr · December 3, 2021, 5:28pm

Hi Siton_system
Unfortunately, it still won’t work.
Please look at the screens below

Topic		Replies	Views
Custom HTML Embed styles get overwritten by rich text Custom code	3	541	November 7, 2023
CSS inside <head> tag not applied to HTML embed code from CMS Custom code bug , cms	0	775	March 3, 2021
Can't fit an app made on embed code Custom code	3	58	May 1, 2025
Adding buttons to blog posts General	2	3763	January 6, 2023
HTML not taking on webflow styles Custom code	1	131	April 28, 2024

Problem with HTML style when using Embed in Rich Text

Related topics