how to center left aligned text on mobile

Question

Desktop Version The design is supposed to have left text and then on the right an image or a video. I want the text to be centered in mobile. Mobile version issue But I'm having trouble trying to figure out why the text is left aligned on mobile. I read online that I should be adding a @media (max-width: 768px). Wondering if anyone can help to specify what I should add.

The code is attached below.

 .content-with-image-on-right .simpleVideo .vidyard_iframe { width:80% !important; /* height: 250px !important; */ right: 0 !important; height: 289px !important; } .content-with-image-on-right .simpleVideo { display: inline-block !important; width: 47%; padding:20px; } .content-with-image-on-right .simpleVideo .player-wrapper { width: 100% !important; height: 80% !important; float: right !important; } .content-with-image-on-right{ margin-top: 10px; margin-bottom: 10px; max-width: 1080px; margin: 0 auto; } .content-with-image-on-right .headingText h3{ text-align: center; font-size:35px ; } .content-with-image-on-right .subHeadingText h4{ text-align: center; font-size:20px; } .content-with-image-on-right .content { float: left; width: 50%; padding: 20px; text-align: center; } .content-with-image-on-right .right-image img{ width:45% !important; margin: 20px; } .content-with-image-on-right .right-image video{ width:45% !important; margin: 20px; } .content-with-image-on-right .rightImage{ float: right; width: 45%; margin: 20px; } .content-with-image-on-right .rightImage img{ max-width: 100%; height: auto; } .content-with-image-on-right .vidyard_tmask { z-index: 9000 !important; } .content-with-image-on-right .vidyard_tbox { z-index: 9999 !important; } #vy-player #playlist_container, .player-wrapper { width: 80% !important; height: 80% !important; } .content-with-image-on-right .right-image video{ border: none !important; } @media (max-width: 768px) { .content-with-image-on-left .content{ width:100% !important; font-size:18px; } .content-with-image-on-left .leftImage{ width: 100% !important; margin: 0 !important; } .content-with-image-on-right .right-image video{ width: 100% !important; margin: 0 !important; border: none !important; } .content-with-image-on-right .right-image img{ width: 100% !important; margin: 0 !important; } .content-with-image-on-right .simpleVideo .vidyard_iframe { width: 56% !important; } } 

 <div class="content-with-image-on-right"> <div class= "headingText"><h3>{{widget.headingtext}}</h3></div> <div class= "subHeadingText"><h4>{{widget.subheadingtext}}</h4></div> <div class="content">{{ widget.content_area }}</div> <div class="right-image" style="side-image: url({{ module.side_image_group.custom_image_module.src|cut('http:') }});"> {% if module.side_image_group.custom_image_module.src %} <img src="{{module.side_image_group.custom_image_module.src}}" width="{{ module.side_image_group.custom_image_module.custom_image_module.width }}" height="{{ module.side_image_group.custom_image_module.custom_image_module.height }}" alt="{{ module.side_image_group.custom_image_module.custom_image_module.alt }}"> {% else if module.vidyard_viedo%} <div class="simpleVideo">{{module.vidyard_viedo}}</div> {% else if module.side_image_group.webm and module.side_image_group.mp4 %} <video playsinline muted controls poster="{{ module.side_image_group.custom_image_module.src }}"> <source src="{{ module.side_image_group.webm|cut('http:')|cut('https:') }}" type="video/webm"> <source src="{{ module.side_image_group.mp4|cut('http:')|cut('https:') }}" type="video/mp4"> <source src="{{ module.side_image_group.ogg|cut('http:')|cut('https:') }}" type="video/ogg"> </video> {% endif%} </div> </div> 

Answer 1

You need to add CSS code like this:

@media (max-width: 767px) {
  .content-with-image-on-right .content,
  .content-with-image-on-right .rightImage {
    float: none;
    width: 100%;
    margin: 0;
  }
}