-2

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?

TylerH
  • 20,799
  • 66
  • 75
  • 101
SPW
  • 35
  • 5
  • Hello new user and welcome. To begin you need to give your question some more content and show that you have already did something. So an example of your html code would be a first step, so we can give you a more accurate answer to the challenge you face. See [this page](https://stackoverflow.com/help/mcve) where this is explained. – Demian May 02 '19 at 22:50
  • Hi! Thanks for pointing out that my question was not clear. I am a total newbie in html, css and worpress. – SPW May 03 '19 at 15:35
  • We understand, we all start like you, that's not a problem. Try to familiarise with how questions are being asked. Because your question can now have multiple different solutions and none might be applicable. That's why clarity is important. Go to your page and open (ctrl+shift+i) the browser console and see if you can copy the HTML code that's part of the element and paste it and modify it here in your question. – Demian May 03 '19 at 15:59
  • Thanks for your comments. I rephrase my question a little bit in my response to @Iisrael. I tried to open the browser console and copy the HTML code that you as per your description, but I didn't manage to open the browser console. Do you know what could have gone wrong? – SPW May 03 '19 at 16:41

1 Answers1

-1

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.

Iisrael
  • 397
  • 4
  • 17
  • I am very new in html, css and wordpress. My question was – I made a 2-column section for my desktop page in Wordpress, where the image fills one of the column. I want to show this image full-width (stretching from left border to right border without any spacing) on the mobile device. How could I do that? I tried to play around all the settings on the Elementor editor, but it didn't work. Thanks for making the code for me. I tried to insert it on the customize>additional CSS and also customCSS/JS, but it didn't work. Could you tell me more clearly, how to do that? – SPW May 03 '19 at 15:47
  • Shi, it does sound like your question has changed a bit, I would suggest editing the question itself to clarify that you are now looking for a two column layout. I can update the fiddle to show you a way to do this. What are you going to put in the second column? This way you can see a bit more of what you are trying to achieve. There are a few ways to add the code to your site, but you will need to put the correct parts in the correct places. The CSS is the part that should go into your additional CSS section (assuming this add css to your global style.css file). The html should go... – Iisrael May 03 '19 at 16:10
  • ...in an html block on the page you would like it displayed or in a template (ie. single.php) – Iisrael May 03 '19 at 16:11
  • I have updated my questions and included pictures. I hope that it is clearer now. Thanks for the code! I inserted an html element to the section and paste your code there. I manage to get this (https://drive.google.com/open?id=1nTkoYw12gVQKs-k7LdFQoMn8baVxFkqf). My questions are: 1. How do I insert an html code to my image? I couldn't find any field that I could do it. 2. How do I make it looks it this (https://drive.google.com/open?id=1CvWrqGogynSTN2qn3myKYUT0ZkzZP8o1), while still have my desktop image like this (https://drive.google.com/open?id=1TKhwA_vQnukeh-q1KL5sqXtHYtXVRjDA)? – SPW May 03 '19 at 16:59
  • This seems to be settings from your theme. You need to be able to control the css for each element to be able to customize the look of a page etc. This can be done by using block of html (most themes/page builders have this) Or you will need to create a child theme, edit the theme files in your child theme as you see fit including the template files. Otherwise you are stuck with what the theme is designed to do. I suggest looking at forums specifically for your theme – Iisrael May 04 '19 at 00:56
  • Thanks! I managed to do it with someone's help, and it was quite complex for me, so I cannot really explain the solution here. Thanks for all your help. – SPW May 05 '19 at 10:25