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
-
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:
- Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
What about the bullet points? I want to separate some of the sentences out as they are more “points of information”.
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;
}
}
@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;
}
}
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).
@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;
}
}
Now the bullet points are completely gone.
@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;
}
}
I was able to add line breaks into the paragraph, now I just need the last three lines to have bullet points