2017-11-16 5 views
0

私は、複数のカテゴリのためにポートフォリオが不均一になるため、ポートフォリオのサイズを静的にする方法を見つけようとしています。私はAvadaのテーマを使用しています。ポートフォリオページ(https://www.socalip.com/professionals/)に行くと、下位のポートフォリオのいくつかが他のポートフォリオよりどのように浮いているかがわかります。Avadaのポートフォリオ

静的なサイズにする可能性のあるCSSを知っている人はいますか?私はできるだけそれらをすべて統一しておきたいと思います。私が重要な細部を見逃してしまった場合にはお詫びします

ありがとうございます!

+0

良い場所と指定のフォントサイズ、例えば拘束する: '.fusion-ポートフォリオのコンテンツは{ フォントサイズをH4:10pxのを、 } 'あなたは、ロード時に位置が計算され、インラインスタイルで設定され、ウインドウがサイズ変更された後に更新される位置を持つ要素があることを知っています。また、絶対配置されているので、通常のドキュメントフロー*テキストを含むプロファイルイメージの下の要素に 'min-height'を宣言しようとすると、その要素の下にある要素を押し下げることはありません。 – UncaughtTypeError

+0

あなたは、あなた自身が**自分でコードを書き込もうとします**。 ** [もっと研究をして](// meta.stackoverflow.com/questions/261592)**あなたが問題を抱えていると、あなたが試みたものを投稿することができます**あなたの質問の中で、** [最小限の、完全で、検証可能な例](// stackoverflow.com/help/mcve)**を提供しています。あなたのウェブサイトへのリンクは、あなたがそれを修正したりリンクが死んだら良いことはありません。 – Rob

+0

ああ、それは私にそれらの仕事のより良い理解を与える。あなたは正しく、.fusion-portfolio-content h4を{font-size:10px; }(少し大きめにしました)完璧に動作しました。 –

答えて

0

あなたのポジションは、絶対にすべてを捨ててしまいます。これは、私がCOL-間隔クラスはまた、どこか別の場所で使用されているが、それはより良い、あなたのフッククラスを追加作成する場合には特異で両方のクラスを使用していて

.fusion-portfolio-post.fusion-col-spacing { 
    position: static !important; 
} 

の周りに行くのに役立ちますこのコンポーネントを保持している上位の親divは、その特定のものにそれを追加して、さらに具体的にして、サイト内の別のコンポーネントを台無しにしないようにします。 (オプションに必要となる可能性があるAditionalコード...)例えば

<div class="hook-class"> 
    <my shortcode for this component here/> 
</div> 

//CSS 
.hook-class > .fusion-portfolio-post.fusion-col-spacing { 
    position: static !important; 
} 

EDIT

H4タグはあなたに長い名前の折り返しの問題を提供します。私があなたであれば、私はそれらを楕円形にし、判読性のためにフォントサイズを保持します。それでもあなたの選択です。スクリーンショットでJeffに通知してください。

.fusion-portfolio-content h4 { 
    width: 200px; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap; 
} 

ここでも具体性を使用してください。ここで

は異なる応答ブレークポイント

1024px enter image description here

991px enter image description here

768px enter image description here

のテストです500pxなど

enter image description here

+0

あなたがそうしていれば、あなたはまた、テーマの反応的な調整を打ち切りから外します。それは、ポジショニングの再計算を否定するためです。テーマのスタイルと戦ったり、さまざまなビューポートサイズをMedia Queryを使って計算したり、Flex *を使って(すべての場合)*これを回避することはできますが、私はそれをお勧めしません。それはあまりにも面倒です。 (免責事項:主観的意見 - 討論を求めていない) – UncaughtTypeError

+0

@UncaughtTypeError違うブレークポイント(500px、768px、991px、1024px)でテストしたところ、ちょっと変わったよ。 – LOTUSMS

+0

自分で簡単にテストしてみた。漠然と興味をそそられ、軽度に驚いた。しかし、解像度が高いほどレイアウトが損なわれるようです。まだ簡単に修正できるはずです。 – UncaughtTypeError

関連する問題