Skip to main content

Return to Question

replaced http://stackoverflow.com/ with https://stackoverflow.com/
Source Link
URL Rewriter Bot
URL Rewriter Bot

I'm making a website and would like one part of my HTML to run when the width of the browser is greater than 768px and another part of my HTML to run only when the width of the browser is less than or equal to 768px. I read an old StackOverflow question about this herehere, but am not sure how to carry out the JavaScript suggested by CodinCat as I have no experience with it. (More specifically, can I just directly insert the HTML between the curly brackets? What exactly do I put where it says "your media queries"--768px, @media..., etc.?

For example--
HTML when greater than 768px:

<img src="images/1.png" alt=""/>
<p>Some text</p>

HTML when less than/equal to 768px:

<p>Some text</p>
<img src="images/2.png" alt=""/>

I'm making a website and would like one part of my HTML to run when the width of the browser is greater than 768px and another part of my HTML to run only when the width of the browser is less than or equal to 768px. I read an old StackOverflow question about this here, but am not sure how to carry out the JavaScript suggested by CodinCat as I have no experience with it. (More specifically, can I just directly insert the HTML between the curly brackets? What exactly do I put where it says "your media queries"--768px, @media..., etc.?

For example--
HTML when greater than 768px:

<img src="images/1.png" alt=""/>
<p>Some text</p>

HTML when less than/equal to 768px:

<p>Some text</p>
<img src="images/2.png" alt=""/>

I'm making a website and would like one part of my HTML to run when the width of the browser is greater than 768px and another part of my HTML to run only when the width of the browser is less than or equal to 768px. I read an old StackOverflow question about this here, but am not sure how to carry out the JavaScript suggested by CodinCat as I have no experience with it. (More specifically, can I just directly insert the HTML between the curly brackets? What exactly do I put where it says "your media queries"--768px, @media..., etc.?

For example--
HTML when greater than 768px:

<img src="images/1.png" alt=""/>
<p>Some text</p>

HTML when less than/equal to 768px:

<p>Some text</p>
<img src="images/2.png" alt=""/>
Source Link
traumerisch
traumerisch
  • 217
  • 1
  • 4
  • 11

Using JavaScript to change HTML when browser size changes?

I'm making a website and would like one part of my HTML to run when the width of the browser is greater than 768px and another part of my HTML to run only when the width of the browser is less than or equal to 768px. I read an old StackOverflow question about this here, but am not sure how to carry out the JavaScript suggested by CodinCat as I have no experience with it. (More specifically, can I just directly insert the HTML between the curly brackets? What exactly do I put where it says "your media queries"--768px, @media..., etc.?

For example--
HTML when greater than 768px:

<img src="images/1.png" alt=""/>
<p>Some text</p>

HTML when less than/equal to 768px:

<p>Some text</p>
<img src="images/2.png" alt=""/>