キャラの画像サイズの変更

mbpyd325

キャラの吹き出しについてです。
[chat face="○○○.png" name="□□□" align="left" border="gray" bg="gray" style="maru"]

このコードのキャラの円を大きくするためのコードが、以下に記載されているかと思います。
https://jin-theme.com/manual/fukidashi-icon/

このコードをコピペして、CSSに貼って色々数字変更したのですが、円が大きくなりません。
CSSは全く詳しくない為、コードのどこを変更したら円が大きくなるのか、教えて頂けないでしょうか？

マニュアル確認済み
キャッシュクリア済み
プラグイン全停止済み
WordPressのバージョン :
ご利用のサーバー名 :
PHPのバージョン :
OS :
ご利用のブラウザ :
該当サイトのURL :

tsu_

@mbpyd325 さん

こんにちは！

こちらで検証してみますので、該当する記事のURLをご共有いただけますか...？？
（追加CSSにコードをコピペしたままの状態にしておいていただけると助かります）

よろしくお願いいたします！

mbpyd325

私はCSSに非常に弱いのですが、balloon-iconのサイズを変更してみました。
（セリフのサイズも変えないとダメなのでしょうか？）
貼り付けたCSSは以下になります。

/吹き出しのアイコンを大きくする/
.balloon-box {
padding-bottom: 20px;
}

@media (min-width: 768px){

.balloon-icon {
width:120px;
height:120px;
}

.balloon-icon img{
width:120px;
}

.balloon-right .balloon-serif{
margin: 0 125px 40px 125px;
}

.balloon-left .balloon-serif{
margin: 0 125px 40px 125px;
}

.icon-name{
width: 100px;
top: 105px;
font-size: 12px;
}
}

@media (max-width: 767px)
{

.balloon-icon {
width:100px;
height:100px;
}

.balloon-icon img{
width:100px;
}

.balloon-right .balloon-serif{
margin: 0 98px 30px 0px;
}

.balloon-left .balloon-serif{
margin: 0 0px 30px 98px;
}

.icon-name{
width: 80px;
top:82px;
font-size: 11px;
}
}

適当なURLを記載しますので、お手数ですが確認の方、宜しくお願いします。。
https://poikatsu-walker.com/tokyu-card-jal-tokyu-card-difference/

tsu_

@mbpyd325 さん

URLありがとうございます！

追加CSSの先頭に貼り付けると反映されるので、
反映されない原因の1つは追加CSS内のどこかのコードに不備があるんじゃないかと思います。。

追加CSSの先頭に↓のコードを貼り付けてみてもらえますか...？？

.balloon-box {
padding-bottom: 20px;
}

.balloon-icon.maru {
border-radius: 50px;
}

@media (min-width: 768px){
    
.balloon-icon {
width:100px;
height:100px;
}

.balloon-icon img{
width:100px;
}
    
.balloon-right .balloon-serif{
margin: 0 125px 40px 125px;
}

.balloon-left .balloon-serif{
margin: 0 125px 40px 125px;
}
    
.icon-name{
width: 100px;
top: 105px;
font-size: 12px;
    }
}

@media (max-width: 767px)
{
    
.balloon-icon {
width:80px;
height:80px;
}

.balloon-icon img{
width:80px;
}
    
.balloon-right .balloon-serif{
margin: 0 98px 30px 0px;
}

.balloon-left .balloon-serif{
margin: 0 0px 30px 98px;
}
    
.icon-name{
width: 80px;
top:82px;
font-size: 11px;
}   
}

（一部コードを修正してあります）

mbpyd325

円が大きくなりました！
先頭に貼り付けて解決することもあるのですね。
回答ありがとうございました！

tsu_

@mbpyd325 さん

ご報告ありがとうございます！