[Sumiko Miida]

Hi,

I appreciate if you would advice how to change site-description from single line to double line.
I checked header.php but couldn’t find tag <!–?php bloginfo( ‘description’ ); ?–>.

Thank you,
Sumiko

[Pratik]

Hi Sumiko,

Please post in your site url?

Regards,
Pratik

[Sumiko Miida]

Hi Patrik-san,

I am so sorry for my feedback delay.
My site url is http://dvcon-japan.com/wordpress/2017/ .

I would like to change site description “2017年6月30日　新横浜国際ホテル マナーハウス南館” from single line to double or triple line like below.

2017年6月30日　新横浜国際ホテル マナーハウス南館
->

2017年6月30日　
新横浜国際ホテル マナーハウス南館

I appreciate your help.

Thank you,
Sumiko

[Pratik]

Hi @Sumiko,

Site asks me for password.

[Sumiko Miida]

Oh goddess…Terribly sorry. The password is dvcon2017.

[Pratik]

Hi @Sumiko-san(Please do not be mad if I got the honorofic wrong),

Please try following code in Appearance=> Customize=> Additional CSS box:

#site-description {
    width: 200px;
}

Increase/decrease 200px to increase/decrease the width so that you can increase/decrease the size of site Site Description.

Regards,
Pratik

[Sumiko Miida]

Hi Patrik-san,

Thank you for your advice. But since second line will be longer than 1st line, the way doesn’t work well. With this way, the description shows like below;

2017年6月30日
新横浜国際ホテル
マナーハウス南館

1) can I use “<br>” to change the line?
2) can I decrease the space between 1st line and 2nd line?
3) can I move site description lower (mid of header hight)?

I really appreciate your help.

Thank you,
Sumiko

[Sumiko Miida]

Hi Patrik-san,

I could solve my question 1) & 2) above!
Could you give me your advice for 3)? Can I move site-description lower?

Thank you,
Sumiko

[Sumiko Miida]

Sorry again…
As 1), I tried to add spacing for line arrangement. It shows perfect on PC but not on smartphone.
So I would like to use <br> for line break. I appreciate your advice…

Sumiko

[Mahesh]

@sumiko: This is a bit tricky one, controlling the line break as you using <br /> is not possible here without customization. Though here is the CSS I’ve come up with, hope this helps. If not, I recommend you to hire a customizer to customize the theme further to display the site tagline with line break.

#site-details {
    margin-top: 45px;
}

@media screen and (max-width: 960px) and (min-width: 768px) {
    #site-description {
        width: 260px;
    }
    #site-details {
	margin-top: 55px;
    }
}

@media screen and (max-width: 767px) {
    #site-description {
        width: 230px;
        visibility: hidden;
    }

    #site-description:after {
        content: "2017年6月30日                   　　　　　　　                   　新横浜国際ホテル マナーハウス南館";
        visibility: visible;
        display: block;
        margin-top: -100px;
    }
}

Note: Please paste the code as it is or it won’t work.

Regards,
Mahesh

[Sumiko Miida]

Hi Mahesh-san,

Thank you so much for your advice. But with this css, it shows perfect on smartphone but not on PC.
I am sorry for bothering you but I appreciate if you would 1 more advice. I understand I cannot use <br/>. Then can I set 2 site-descriptions as css? I wonder whether I can devide this description into 2 as below.

2017年6月30日
新横浜国際ホテル マナーハウス南館

My target is to create site looks like https://dvcon.org/.

Great thanks,
Sumiko

[Sumiko Miida]

Hi Mahesh-san,

I reconsidered your css advice and Patrik-san’s css, finally I could modified this issue!
I mixed your css and Patrik-san’s one and arranged pix number as below;

.home #content .entry-title {
display: none;
}

#site-details {
margin-top: 45px;
}
#site-description {
width: 400px;
}

@media screen and (max-width: 960px) and (min-width: 768px) {
#site-description {
width: 260px;
}
#site-details {
margin-top: 55px;
}
}

@media screen and (max-width: 767px) {
#site-description {
width: 230px;
visibility: hidden;
}

#site-description:after {
content: “2017年6月30日 新横浜国際ホテル マナーハウス南館”;
visibility: visible;
display: block;
margin-top: -50px;
}
}

Then it works perfect now.

I really appreciate your patient support. You are great!!

Thank you,
Sumiko

[Mahesh]

@sumiko: Glad to know that. Have a nice day!

Regards,
Mahesh

[Author]

Posts