Goal: add a bulleted list to the text beside an image on the “Our Process” page (Influence theme) and increase body text size.
Proposed CSS: add rules in theme.css under a min-width:600px media query. Initial code targeted .max-w-screen-xl .break-words to adjust text-indent, font size, line-height, and margins. A separate rule increased the heading (.font-heading.break-words) to 52px.
Bullets attempt: list behavior was added (display:list-item; list-style-type:square; list-style-position:inside; margin-left:1em). This caused the entire paragraph to become a single bulleted block and also applied to the title.
Refinement: selector changed to .max-w-screen-xl .break-words:not(:first-child) to avoid the title. User then reported all bullets disappeared. Provider reposted the same updated code.
Current status: user inserted line breaks and wants only the last three lines bulleted. No confirmed solution yet; bullets are not scoped to only those lines. Screenshots were shared to illustrate results. Discussion remains open with the key need to bullet only selected lines without affecting the heading.
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;
}
}
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.
I have updated again
@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;
}
}
