+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: Need a help with HTML - Mobile VS Desktop Version (/showthread.php?tid=5861331)
Need a help with HTML - Mobile VS Desktop Version - #TDR - Jul 13, 2018
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)
RE: Need a help with HTML - Mobile VS Desktop Version - Nachfolger - Jul 13, 2018
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.
RE: Need a help with HTML - Mobile VS Desktop Version - #TDR - Jul 13, 2018
(Jul 13, 2018 09:15 AM)Nachfolger Wrote: 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.
RE: Need a help with HTML - Mobile VS Desktop Version - Harryshotta - Jul 13, 2018
(Jul 13, 2018 08:28 AM)#TDR Wrote: Snip
(Jul 13, 2018 09:15 AM)Nachfolger Wrote: 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