Need code to adjust image banner content such as text and button on computer and phone separately

Technical Q&A
1

I’m working on a website and need to create a responsive image banner where the content layout adjusts differently for phones and PCs. I want to manually adjust the padding and positioning of the content based on the screen size.

2

This can be solved by introducing some media queries in your css.

A very simple example may look something like this:

@media (max-width: 1350px) {
  .banner { padding: 100px; }
}
@media (max-width: 1200px) {
  .banner { padding: 80px; }
}
@media (max-width: 860px) {
  .banner { padding: 20px; }
}