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

Benito

Member
  • Posts

    2
  • Joined

  • Last visited

Personal Information

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Thank you bangank36 for your answer. How can design new image for smaller screen ? you mean the size in px? If yes how bigger should be the image in px to get better result? Thanks again
  2. Site URL: https://www.entropiacaffe.it/ I have been trying to resize 'background-images' on Home-page (not other pages because i would like to make change only on homepage) on mobile/tablet in 7.1. As you can see from my attached files, the image is not properly fit on mobile and tablet. I would like to shrink my background image, to fits in. Is here anyone can help me? I tried to copy and paste some css codes from around, but still i didnt find nothing works properly. My url is https://www.entropiacaffe.it/ That is my css code under>design>custom css if can help you in some way. This code at moment I do not want to change because is working properly for what i would like as final result. /* CSS FOR TABLET AND MOBILE */ @mobile: ~"only screen and (max-width: 640px)"; @tablet: ~"only screen and (min-width: 641px) and (max-width: 949px)"; /* CSS FOR TABLET */ @media @tablet { /* Insert Code for Tablet Below This Line*/ /* Insert Code for Tablet Above This Line */ } /* CSS FOR MOBILE */ @media @mobile { /* Insert Code for Mobile Below This Line*/ .sqs-block-image { width: 90%; margin: 0 auto; } .sqs-block-product { width: 70%; margin: 0 auto; } /* Insert Code for Mobile Above This Line */ } h3 { color: #ad9961 !important; } h4 { color: #ad9961 !important; } /* related product 4 items */ .ProductItem-relatedProducts .list-grid .grid-item:nth-child(n+5) { display: none; } /* 2 Column Product Grid */ @media only screen and (max-width:640px) { .products .list-grid { display: flex; flex-wrap: wrap; justify-content: space-between; } .products .grid-item { width: 50%; } } 1 - That is how my image appear on desktop and i would like that appear on mobile and tablet. The compromise can be to adapt the word and button (make it bigger and readable) 2- That is how appear on tablet. The image sides are cut. 3- That is how appear on mobile. Side cut it an in this case even the quality of image looks lower Thanks in any case Benito
×
×
  • Create New...