wordpressresponsive-designelementorresponsive-images

Full-width responsive image on mobile device and cover half page on desktop


I am building a website on Wordpress. I made a 2-column layout for my desktop page in Wordpress, where the image fills one of the column and the text fills the second column. (https://drive.google.com/open?id=1TKhwA_vQnukeh-q1KL5sqXtHYtXVRjDA) This is how it looks now (https://drive.google.com/open?id=1Rr-iDFylP0Goev2Vb6g9fsgd-lSkJV6x). But I want to show the image full-width (something like this https://drive.google.com/open?id=1CvWrqGogynSTN2qn3myKYUT0ZkzZP8o1) on the mobile device. How could I do that?


Solution

  • Shi,I agree with Demian, your question is a bit vague, but I will give you a general answer for doing this task with CSS using Media Queries.

    In Wordpress you can add the css to your style.css file or in an html block within <style> tags above the <body> tag. Then in your html block or template file give your <div> the correct class. I made this fiddle for you, take a look and let me know if that helps.