Add Bulleted List To Body Text And Increase Font Size

Add Bulleted List To Body Text And Increase Font Size

Explore-Sherpa
Excursionist
22 0 6

I want to add a bulleted list to this image with text section along with increasing the size of the body text so that the list fills the entire section next to the picture. Any custom CSS code would be greatly appreciated!

Link: https://www.exploresherpa.com/pages/our-process

I am using an Influence Theme

Screenshot 2024-06-24 111510.png

Replies 10 (10)

BSS-TekLabs
Shopify Expert
359 102 112

- Here is the solution for you @Explore-Sherpa 
- Please follow these steps:

- Then find the theme.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

@media only screen and (min-width: 600px) {
.max-w-screen-xl .break-words {
     text-indent: 25px !important;
    font-size: 22px !important;
    line-height: 46px !important;
    margin-top: 50px !important;
}
}

- Here is the result you will achieve:

BSSTekLabs_0-1719246631102.png

 

 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Explore-Sherpa
Excursionist
22 0 6

What about the bullet points? I want to separate some of the sentences out as they are more "points of information".

BSS-TekLabs
Shopify Expert
359 102 112

You can add the following code to increase the size of the text "Trimming And Processing"

@media only screen and (min-width: 600px) {
.font-heading.break-words {
    font-size: 52px !important;
}
}

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
BSS-TekLabs
Shopify Expert
359 102 112

@Explore-Sherpa  all code 

@media only screen and (min-width: 600px) {
.max-w-screen-xl .break-words {
     text-indent: 25px !important;
    font-size: 22px !important;
    line-height: 46px !important;
    margin-top: 50px !important;
    display: list-item;
    margin-left: 1em;
    list-style-type: square;
    list-style-position: inside;
}
.font-heading.break-words {
    font-size: 52px !important;
}
}
If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Explore-Sherpa
Excursionist
22 0 6

I am hitting enter (and shift-enter) to try and create multiple bulleted lines, but everything in the paragraph is still one, bulleted paragraph (also the title is bulleted for some reason).

BSS-TekLabs
Shopify Expert
359 102 112

 

@media only screen and (min-width: 600px) {
.max-w-screen-xl .break-words:not(:first-child) {
     text-indent: 25px !important;
    font-size: 22px !important;
    line-height: 46px !important;
    margin-top: 50px !important;
    display: list-item;
    margin-left: 1em;
    list-style-type: square;
    list-style-position: inside;
}
.font-heading.break-words {
    font-size: 52px !important;
}
}

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Explore-Sherpa
Excursionist
22 0 6

Now the bullet points are completely gone. 

BSS-TekLabs
Shopify Expert
359 102 112

I have updated again

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
BSS-TekLabs
Shopify Expert
359 102 112
@media only screen and (min-width: 600px) {
.max-w-screen-xl .break-words:not(:first-child) {
     text-indent: 25px !important;
    font-size: 22px !important;
    line-height: 46px !important;
    margin-top: 50px !important;
    display: list-item;
    margin-left: 1em;
    list-style-type: square;
    list-style-position: inside;
}
.font-heading.break-words {
    font-size: 52px !important;
}
}
If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Explore-Sherpa
Excursionist
22 0 6

I was able to add line breaks into the paragraph, now I just need the last three lines to have bullet pointsScreenshot 2024-06-24 120019.png