How to add left and right margin

HTML & CSS
1

The web script I’m using provides for the admin to add/change text via admin panel.
But the html page looks like the code below.

<div class="user-setting-panel page-margin termsofuse pt_shadow pt_page_margin col-md-8"><div class="wo_about_wrapper_parent">
	<div class="wo_about_wrapper">
		<div class="hero hero-overlay" style="background: #593232;">
			<div class="container">
				<h1 class="text-center">{{LANG terms_of_use}}</h1>
				</br>
			</div>
</div>
	</div>
</div>
<div class="col-md-2"></div>
<div class="user-setting-panel page-margin termsofuse pt_shadow pt_page_margin col-md-8">
	<?php echo htmlspecialchars_decode($pt->terms['terms_of_use']);?>
</div>
<div class="col-md-2"></div>

This page ‘Terms of Use’ looks good via desktop, but via mobile it shows no left & right white space margins, in other words, in mobile view the text is flat against the left side of the container. I’ve tried several things without success.
I believe the line that needs to be styled is this one:

<div class="user-setting-panel page-margin termsofuse pt_shadow pt_page_margin col-md-8">

any suggestions are appreciated.

1 Like
2

It’s really easy :slight_smile:

margin - left :

margin - right :

Try that out.

3

Thanks for your reply. Yes, typically it’s really easy.
I tried this:

				<style>
				@media only screen and (min-device-width : 320px) and (max-device-width : 812px){
				.termsofuse{ margin-left: 10px; background-color:#fff000; }
				}
				</style>

<div class="wo_about_wrapper_parent">
	<div class="wo_about_wrapper">
		<div class="hero hero-overlay" style="background: #593232;">
			<div class="container">
				<h1 class="text-center">{{LANG terms_of_use}}</h1>
				</br>
			</div>
		</div>
</div>
</div>
<div class="col-md-2"></div>
<div class="user-setting-panel page-margin termsofuse pt_shadow pt_page_margin col-md-8">
	<?php echo htmlspecialchars_decode($pt->terms['terms_of_use']);?>
</div>
<div class="col-md-2"></div>

And I see, via my mobile device, that the background color has changed, but the no left margin looks the same.

Any additional guidance is welcomed.

1 Like
4

If this is bootstrap then the space would usually be built in by default unless you have removed it somewhere?

All those column classes should be siblings in bootstrap as you can’t have divs next to column classes as all content goes inside a column class or bootstrap doesn’t work. The html just doesn’t look right.

Of course I’m assuming this is boostrap because of the class names. Do you have a link to the real page?

1 Like
5

Ok, well sorry I can’t help further. Glad the code helped you out though :slight_smile:

6

As I mentioned above you would not generally give margins to column classes as that breaks the bootstrap grid. You could give padding to the inner elements of the column but it depends on what you want to achieve as there’s not really enough information here to work on. :slight_smile:

Also note that min-device-width and max-device-width have been deprecated and should be avoided. Use min-width or max/width media queries instead.

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.