How can I adjust the heading text on my image banner for desktop view?

i want to adjust the heading text on my image banner and move it to the right side of the image but only desktop. i want to keep it centered in mobile view. any help in the right coding coz nothing has worked from my end.

You can use the text-align property in CSS to right align text on a desktop only. Here’s an example of how to do this:

@media only screen and (min-width: 768px) {
  /* This will only apply to desktop screens */
  .text-right {
    text-align: right;
  }
}

To use this, simply apply the text-right class to the element that you want to right align, like this:


This text will be right aligned on desktop screens.

sorry where exactly do i put this code? in the base.css?