Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

Category Description On Mobile Rate Topic   - - - - -

 
  • johnbol1
  • Never Re
  • Members
  • Join Date: 23-Feb 10
  • 4342 posts

Posted 30 July 2018 - 05:14 PM #1

I have added a scrollable text box to my category descriptions https://prnt.sc/kcvwht
https://prnt.sc/kcvxy1to save some page space

 

like this 

<div style="overflow: auto; width:1100px; height:110px; border:solid 2px black; border-radius: 10px 10px">
<p>my description text is here</p>
</div>

Can you tell me how to make it responsive to fit the screen on mobile/ cell phone view

 

Thanks


Custom printed hi visibility clothing sale the UK's online hivis safety shop
v4.5.2


 
  • tbirnseth
  • CS Cart Expert
  • Authorized Reseller
  • Join Date: 08-Nov 08
  • 10770 posts

Posted 30 July 2018 - 06:39 PM #2

Rather than using a style attribute, you might want to either alter the 'content-description' property in them editor or add a cascade in a my_changes stylesheet.  I.e.

.content-description {
  line-height: 1.4;
  word-wrap: break-word;
  /* Above properties are from styles.less, Added properties below */
  overflow: scroll;
  border: 2px solid black;
  border-radius: 10px;
}

The trouble is that you are hard-coding the width/height and not using the media type.  This could be altered by the wysiwyg editor.

 

Note that the above is untested.


EZ Merchant Solutions: Custom (USA based) B2B Development, Consulting, Development and Special Projects (get a quote here).
Commercial addons, payment methods and modifications to meet your business and operations needs.


 
  • alaa
  • Advanced Member
  • Trial users
  • Join Date: 18-Mar 18
  • 51 posts

Posted 30 July 2018 - 09:37 PM #3

I have added a scrollable text box to my category descriptions https://prnt.sc/kcvwht
https://prnt.sc/kcvxy1to save some page space

 

like this 

<div style="overflow: auto; width:1100px; height:110px; border:solid 2px black; border-radius: 10px 10px">
<p>my description text is here</p>
</div>

Can you tell me how to make it responsive to fit the screen on mobile/ cell phone view

 

Thanks

 

You can change the value of width from width:1100px; to width: 100%;

 

In responsive design, avoid using absolute values. Instead, you can use percentage. If that doesn't work, PM me your page url. 



 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 17833 posts

Posted 31 July 2018 - 05:41 AM #4

Yes, just replace 1100px with 100%

 

http://prntscr.com/kd30n4


GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    CS-Cart RU                         24500 руб.
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      CS-Cart RU + UniTheme    36000 руб.


 
  • Alt-team
  • CS-Cart Developer
  • Authorized Reseller
  • Join Date: 18-Jan 11
  • 2587 posts

Posted 31 July 2018 - 09:39 AM #5

Yes, it's better to use width in percents instead of px in the responsive themes. It's for fluid grids and content.


ADD-ONS  |  Web development service  |  Web design  |  Page speed increasing  | Server Optimization

Buy MULTIVENDOR - USD 1250 (14% off)   Buy CS-CART LICENCE - USD 345 (13% off)

 Email - manager@alt-team.com | Skype - Altteam    


 
  • johnbol1
  • Never Re
  • Members
  • Join Date: 23-Feb 10
  • 4342 posts

Posted 31 July 2018 - 05:56 PM #6

Thanks everyone, fixed


Custom printed hi visibility clothing sale the UK's online hivis safety shop
v4.5.2