wp　画像横テキスト比率変更　html　css

既存テーマのcssに指定されているブロックの比率を変えたいです。

wpの旧エディターのテキスト画面に、既存themeを利用してコードを書いています。

ｐｃでは、左側に画像　右側にタイトル、テキスト
レスポンシブでは、上から画像、タイトル、テキストにしたいのですが、

もともとのテーマのcssが、５０％ずつのブロックにわける指定があるため
若干、右によって、表示されてしまいます。

全体幅を1150とし、30%程度（画像は150px)にし、残りの70%を文章にしたいのですが
うまくできません。なんとかここまでできたというスキルです。

どなたかご教授いただけますと幸いです。よろしくお願いいたします。

<html> <div class="post_row1"> <div class="post_col post_col-2"> <img src="http://〇〇.png" alt="" width="150" height="150" class="alignright size-thumbnail pc" style="margin: auto;"/> <img src="http://〇〇.png" alt="" width="150" height="150" class="aligncenter size-thumbnail sp" style="margin: auto;"/> </div> <div class="post_col post_col-2"> <h4 class="style4d pc" style="width:70%; margin: auto; text-align:left;">タイトル</h4> <h4 class="style4d sp" style="width:100%; margin: auto; text-align:center;">タイトル</h4> <span style="margin:auto;">テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文</span></div></div> <css>

.post_row1{
max-width :1150px;
margin: auto;
}

@media only screen and (max-width: 715px){
.post__row1 post_col post_col-2 img{
text-align:center;
}}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 732px){
.pc { display: none !important; }
.sp { display: block !important;
}}

@media screen and (min-width: 768px)
.post_content .post_col-2 {
width: 50%;
}

試したこと

もともとのcssを無効にした場合、画像は、右端によってしまいます。

利用環境　win10　ブラウザchrome

行動規範の内容に同意します

回答1件

自己解決

カラムの割合指定が、基本で50%,50%となっていたため、その部分を変更することはできませんでしたが、左カラムの画像と右タイトルの配置を指定し、レスポンシブでもなんとかみられるところで解決としました。みなさん、ありがとうございました。

<div class="service"> <div class="post_row" style="max-width: 1000px; margin:0; padding:0;"> <div class="post_col post_col-2"><img loading="lazy" src="http://〇〇.png" width="219" height="218" class="alignright size-full pc" /><br /> <img loading="lazy" src="http://〇〇.png" " width="219" height="218" class="aligncenter size-full sp" /> </div> <div class="post_col post_col-2"> <h4 class="style4d pc" style="margin: 10px auto 0 auto; text-align: left;">1.タイトル</h4> <h4 class="style4d sp" style="margin: auto; text-align: center;">1.タイトル</h4> <p style="margin:0;padding-top:10px;">テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト<br /> 本文テキスト本文テキスト本文テキスト本文テキスト本文<br /> </p> </div> </div> </div> <div class="service"> <div class="post_row" style="max-width: 1000px; margin:0; padding:0;"> <div class="post_col post_col-2"><img loading="lazy" src="http://〇〇.png" width="219" height="218" class="alignright size-full pc" /><br /> <img loading="lazy" src="http://〇〇.png" " width="219" height="218" class="aligncenter size-full sp" /> </div> <div class="post_col post_col-2"> <h4 class="style4d pc" style="margin: 10px auto 0 auto; text-align: left;">2.タイトル</h4> <h4 class="style4d sp" style="margin: auto; text-align: center;">2.タイトル</h4> <p style="margin:0;padding-top:10px;">テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト<br /> 本文テキスト本文テキスト本文テキスト本文テキスト本文<br /> </p> </div> </div> </div> <css> .service{/*親div*/ position: relative;/*相対配置*/ margin:0; padding:0; }

投稿2021/11/06 22:01

編集2021/11/06 22:06

hiro0024

総合スコア0