【奇怪問題】為何崁入Liteshop商品到wordpress網頁會跑版呢?

崁入Liteshop商品到wordpress網頁有時正常但有時會有類似跑版的情況,主要是不同的佈景主題可能在CSS上的衝突或權重上有所影響,可以透過下列語法來解決:

應該也不能說是「跑版」,應該說是「字的長度」會被它原本的版位設置而擋住,原圖是這樣:

上圖有二個問題,

1、左右 : 商品的標題長太長就被擋了,建議「購買數量」的寬度可以調成30%就好。
2、高度:下拉選單的高度沒有自適應,建議CSS的heigh可以調成auto就可以自適應了。
這個問題有反應給Liteshop,如果他們的原始CSS仍沒有做調整的話,可以自己加上下列CSS來自己調整:
<style>
/*調「寬度」問題*/
.liteshop-order-container .col-6 {
    float: left;
    width: 70%;
    padding: 0 5px;
}
.col-6:nth-child(2){
    float: right;
    width: 30%;
    padding: 0 5px;
   
}

/*調「高度」問題*/
 .liteshop-form-control{
    height:auto;
}

</style>
以上是在Elementor的編輯頁面,拉一個html工具並放在最下方(一定要在最下方它才會最後執行以覆蓋上面已執行的),並在html工具中置入上面語法即可。
如果不是在Elementor,就請在該頁最下方並切換原始碼畫面,在最下方加入上面語法即可。
如果你的網頁是痞客邦、Blogger(Googel Blog)也適用。

Facy

我是Facy,浸淫網路行銷多年,凡是網路行銷相關都興趣十足,特別是「關鍵字&內容行銷」! 目前主要是專職部落客、網站接案製作、架站教學,歡迎找我聊聊。

  • 如果您需要問我相關的話,可以加入FB社團一起交流或寫信給我: smallway.tw@gmail.com
  • 如果您需要更系統性的學習,歡迎參考我的線上課程或家教班
  • 如果您有單一性的問題,例如網站健診、文章問題、做不出的功能,目前接受付費線上家教

發表留言