Dawn Theme: Multi-column fonts and Image with Text width

[INTERSECTIONcp]

Hello everyone, let me ask some questions on the topics mentioned in title.

【Multi-column】

I want to make the font size smaller(only ones in left column if possible) and add empty line, like spaces, between paragraphs so it might be easier for readers to read. If it is possible, I may also want to change width of each columns.

【Image with Text】

Please tell me how to change width of title and main text of Image with Text section. I want to make them a bit wider.

https://intersection-coffee.myshopify.com/pages/about

Here is the page I am talking about, and pass to access is "skiffi"

Thanks for reading this, it is appreciated if anyone tells me how to solve these issues!

[BSS-Commerce · Accepted solution]

Hi @INTERSECTIONcp 

We checked and would like to suggest you a solution below:

- Please go to Online Store => Themes => Edit Code:

- To reduce the font size in the left column and add blank lines between paragraphs, please search for section-multicolumn.css and add the following code at the end of the file section-multicolumn.css:

.multicolumn-card__info .rte p{
  margin-bottom: 10px;
}

.multicolumn-list__item:first-child{
  font-size: 13px;
}

- If you find the empty line spacing between paragraphs unreasonable, please increase or decrease the margin-bottom as you want. Similarly if you find the font size inappropriate, you can adjust it.

- If you want to change the width of the Multi-column, you have to increase the page width. Notice this will increase the page width of your entire site.
- If you want to change, please go to Online store => Themes => Customize:

- To increase the length of the title and main text of the Image with Text section, you search for the file component-image-with-text.css and add the following code at the end of the file component-image-with-text.css:

.image-with-text__content{
  padding-left: 20px; /*increase and decrease to adjust the length on the left*/
  padding-right: 20px; /*increase and decrease to adjust the length on the right*/
}

.image-with-text__content .image-with-text__heading{
  width: 800px; /*increase or decrease to adjust the length of the title*/
}

I hope that it will work for you.

[BSS-Commerce · Accepted solution]

Hi @INTERSECTIONcp 

We checked and would like to suggest you a solution below:

- Please go to Online Store => Themes => Edit Code:

- To reduce the font size in the left column and add blank lines between paragraphs, please search for section-multicolumn.css and add the following code at the end of the file section-multicolumn.css:

.multicolumn-card__info .rte p{
  margin-bottom: 10px;
}

.multicolumn-list__item:first-child{
  font-size: 13px;
}

- If you find the empty line spacing between paragraphs unreasonable, please increase or decrease the margin-bottom as you want. Similarly if you find the font size inappropriate, you can adjust it.

- If you want to change the width of the Multi-column, you have to increase the page width. Notice this will increase the page width of your entire site.
- If you want to change, please go to Online store => Themes => Customize:

- To increase the length of the title and main text of the Image with Text section, you search for the file component-image-with-text.css and add the following code at the end of the file component-image-with-text.css:

.image-with-text__content{
  padding-left: 20px; /*increase and decrease to adjust the length on the left*/
  padding-right: 20px; /*increase and decrease to adjust the length on the right*/
}

.image-with-text__content .image-with-text__heading{
  width: 800px; /*increase or decrease to adjust the length of the title*/
}

I hope that it will work for you.

[INTERSECTIONcp]

Thanks for your help @BSS-Commerce !

Looks like it is what I wanted! But let me ask you 2 more things...

Is is possible to add blank lines just by pressing enter? The code you gave me works great, however I also want to know how to do it when I do not want to add lines after every paragraphs.

Second, could you please tell me how to apply these codes on desktop mode only? I checked the design on mobile mode and looks like it goes a bit wrong like the picture shown below...

[BSS-Commerce · Accepted solution]

Hi @INTERSECTIONcp 

- First, you can't add blank lines just by pressing enter in Customize Theme because Shopify will automatically create a <p> tag for each paragraph when you break the line. This will result that even if you add a lot of blank lines in the Customize Theme, it still won't show the blank lines as you want unless you add the CSS for each of its <p> tags.

- Second, if you want desktop mode only, put your CSS in this:

@media all and (min-width: 750px){
  /*The code you want to apply css to the desktop is here*/
}

I hope that it will work for you.

[INTERSECTIONcp]

@BSS-Commerce , thank you for answering my questions and the code you just mentioned worked nicely!

[Ujjaval]

@INTERSECTIONcp 
Put below css into base.css file (Online store->Themes->Edit code->assets->base.css)

li#Slide-template--17333090418981__5193c82c-c18c-4f00-aa21-5d4e800589d7-2 {
    padding: 20px !important;
    margin: 0 auto;
    text-align: justify;
}
li#Slide-template--17333090418981__5193c82c-c18c-4f00-aa21-5d4e800589d7-1 {
    padding: 20px !important;
    margin: 0 auto;
    text-align: justify;
}