Flowfit Posted June 7, 2022 Share Posted June 7, 2022 (edited) Site URL: https://www.reyabarreyoga.com/faqs Is there additional CSS that I can add to #14 that will make the image resize when viewing on a mobile device? See screenshot of current view of mobile vs desktop using the provided code. Thank you! /* Add an image into Accordion Content *//* replace demo image with your image url */ /* nth-child(1) is first accordion item, nth-child(2) is second item... */ /* :before is image on top, :after if image on bottom */ li:nth-child(3) .accordion-item__description:after { content: ""; display: block; width: 100%; /* image width, you can also use px */ height: 315px; /* image height */ background-image: url(https://images.squarespace-cdn.com/content/v1/5f32fd0a60773f56ba2eb568/5a51b94b-7454-4222-802c-7819ebcaf80b/parkingmap.jpg?format=500w); background-repeat: no-repeat; margin-bottom: 20px; /* space between image-text */ } Edited June 7, 2022 by Flowfit Link to comment
Flowfit Posted June 8, 2022 Author Share Posted June 8, 2022 I think I've resolved this issue, in case anyone else comes across this and is wondering ... I inserted more CSS to target a new image when viewing on mobile only using the following code. /* CSS FOR MOBILE */ @mobile: ~"only screen and (max-width: 640px)"; /* CSS FOR MOBILE */ @media @mobile { /* Insert Code for Mobile Below This Line*/ li:nth-child(3) .accordion-item__description:after { width: 100%; margin: 0 auto; background-image: url(https://images.squarespace-cdn.com/content/v1/5f32fd0a60773f56ba2eb568/692c7b5a-d48a-4818-b057-4a10f5825741/parkingmap-mobile.png?format=300w); } /* Insert Code for Mobile Above This Line */ } tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment