I would like my css to only effect a particular section. How do I do this? At the moment when I paste css code within theme.scss it effect other pages on my site.
Hii, @hubertb
Can you provide me screenshot where you want to edit css.
And provide me your store URL so,
I can give tou a proper solution.
Thank You!
Hello
services page is the page that I am having trouble with
Below is css that I paste into theme.scss.liquid
I have pasted html into the section Custom html on the service page
$color0: #ffffff;
$color1: #ffc000;
$color2: #575756;
$color3: #222222;
$color4: #eeeeee;
$color5: #cacaca;
$color6: #cccccc;
$default-title-color: #222222;
$default-content-color: #575756;
$link-color: $color1;
$button-radius: 3px;
$form-radius: 3px;
$scale1200: 87.5;
body{
margin-top: 50px;
font-family: ‘Lato’, sans-serif;
font-size: 16px;
line-height: 20px;
color: $default-content-color;
}
/*
*/
.pricing-table{
text-align: center;
.pricing-table-col{
border-radius: 6px;
margin-top: 20px;
vertical-align: top;
min-height: 400px;
width: 300px;
border: 2px solid $color1;
display: inline-block;
padding: 20px 20px 40px 20px;
transition: all 0.2s ease-out;
+.pricing-table-col{
margin-left: -2px;
}
.pricing-table-title{
font-size: 20px;
font-weight: 600;
margin: 40px auto 60px auto;
}
.pricing-table-price{
color: $color1;
margin: px auto;
line-height: 28px;
.currency{
vertical-align: top;
font-size: 24px;
}
.price{
font-size: 100px;
font-weight: bold;
}
.terms{
font-size: 24px;
}
}
.pricing-table-description{
margin: 40px 0;
}
&.highlight{
padding: 40px 20px 60px 20px;
margin-top: 0;
background-color: $color1;
color: $default-title-color;
.pricing-table-price{color: $color0;}
}
}
}
/* Large devices (desktops, 1200px and up)*/
//////////////////////////////////////////////////////////////////////////
@media (max-width: 1200px) {
.pricing-table{
font-size: 16px / 100 * $scale1200;
.pricing-table-col{
//border-radius: 6px;
margin-top: 20px / 100 * $scale1200;
vertical-align: top;
//min-height: 380px;
width: 313px;
// border: 2px solid $color1;
//display: inline-block;
padding: 10px 20px 40px 20px;
+.pricing-table-col{
margin-left: -2px;
}
.pricing-table-title{
font-size: 20px / 100 * $scale1200;
font-weight: 600;
margin: 40px auto 60px auto;
}
.pricing-table-price{
color: $color1;
margin: 30px auto;
line-height: 28px;
.currency{
vertical-align: top;
font-size: 24px / 100 * $scale1200;
}
.price{
font-size: 100px / 100 * $scale1200;
font-weight: bold;
}
.terms{
font-size: 24px / 100 * $scale1200;
}
}
.pricing-table-description{
margin: 40px 0;
}
&.highlight{
padding: 30px 20px 60px 20px;
margin-top: 0;
background-color: $color1;
color: $default-title-color;
.pricing-table-price{color: $color0;}
}
}
}
}
/* Medium devices (desktops, 992px and down) */
//////////////////////////////////////////////////////////////////////////
@media (max-width: 1000px) {
.pricing-table{
.pricing-table-col{
display: block;
margin: 0 auto 20px;
width: 80%;
+.pricing-table-col{
margin-left: auto;
}
}
}
}
/* Small devices (768px and down) */
//////////////////////////////////////////////////////////////////////////
@media (max-width: 768px) {
}
/* Extra Small devices (480px and down) */
//////////////////////////////////////////////////////////////////////////
@media (max-width: 480px) {
}
@hubertb
What do you want to edit by css??
Thank You.
@hubertb
What to modify from css??
At the moment the css that I have paste into theme.scss has adjusted my homepage and I dont want it to do that.Is there codeing that I can apply so it targets only my service page?