[#TDR]

Hello,

I would need a little help with CSS and HTML and I hope there is someone skilled enough to give me an advice.

I am having problem that "text-align: left" looks terrible in the mobile version: https://imgur.com/a/LnvT7al
and I would need to make it look like this https://imgur.com/a/po2pZYL (keep "text-align: left" and have it centered on the middle)

while keep the desktop version (from screenshot 1, which looks properly in the desktop version) unchanged just with "text-align: left".

website: https://kutt.it/XTfUgd (shortened link)

[Nachfolger]

I'm on my phone at work, and truth be told, my reading comprehension is bad as-is.

It looks like for small screens you want to override the text alignment property. This is rather simple, just look into CSS media queries and simply target screens under 650px or something.

Once I get home, I'll be able to write up a demo of you haven't figured it out.

[#TDR]

I'm on my phone at work, and truth be told, my reading comprehension is bad as-is.

It looks like for small screens you want to override the text alignment property. This is rather simple, just look into CSS media queries and simply target screens under 650px or something.

Once I get home, I'll be able to write up a demo of you haven't figured it out.

Awesome, I would be really grateful! I'll wait for you to be sure it is done properly. Thank you so much.

[Harryshotta]

Snip

It looks like for small screens you want to override the text alignment property. This is rather simple, just look into CSS media queries and simply target screens under 650px or something.
.

This dude is correct...
Name your div class = text-middle
@media only screen and (max-width: 650px) {
   .text-middle {
     text-align: center;  
   }
}
If this doesn't work what I normally tend to do is use padding-left and right to get it perfect for the responsive page.
This would be your quick solution Dickhead