Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Site scaling while having sticky product descriptions


t-rex97

Question

On my website I'm trying to use custom css to enable sticky product descriptions on desktop only, but i keep running into scaling issues. It works well on my full screen 1080p monitor, but on 4k monitors part of the description is always cut off. This happens when adjusting the size of the browser window past a certain width as well. My website is www.thomas-stokes.com (the scaling issue normally happens on the product pages for my prints  https://www.thomas-stokes.com/shop/kaleidoscope-fine-art-print  i'm assuming that's because of the long descriptions too). 

Here is the code that I code up with (I've currently removed it from my site for now because it was causing issues for my customers):

.tweak-product-item-details-alignment-left .ProductItem-details { text-align: left; position: fixed; margin-left: 0px; }

.tweak-product-item-details-alignment-left .ProductItem-details { text-align: left; position: fixed; margin-left: 0px; }


@media all and (min-width:0px) and (max-width: 1024px) {
  .tweak-product-item-details-alignment-left .ProductItem-details { text-align: left; position: relative; margin-left: 0px; }
}

@media all and (min-width:2560px) and (max-width: 3840px) {
  .tweak-product-item-details-alignment-left .ProductItem-details { text-align: left; position: relative; margin-left: 0px; }
}

Two examples of what I am trying to achieve are: https://www.ssense.com/en-us/men/product/dr-martens/black-1461-mono-derbys/3986101 (or any of the product pages on the website) and https://cutbykira.com/collections/blu-jackets/products/dutch-camo-rsma-jacket (or any of the product pages on the website).  

Notice how when you adjust the size of the windows, the website scales properly while maintaining the sticky product descriptions.

I'm assuming what I would need to have to do with css is to keep the whole left side of the product page (from the Title to the Add to Cart button scaled to all be visible on screen when the browser is past a certain width, but i have no idea how to do that.

If anybody can help me with this it would be greatly appreciated. 

Edited by t-rex97
Link to post
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

1 answer to this question

Recommended Posts

  • 0

Can you take screenshot at that time?

"but on 4k monitors part of the description is always cut off"

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...