Centering content

HTML & CSS
1

I’m trying to get my content to work in all applications. but for some reason my email address will not shift. it’s over lapping.

It’s fine on computer but not Iphones. Here is the link.

2

To start you need to update the way you do some bits as they are now depreciated. You shouldn’t be using align=“center” instead you should apply css to the parent container (.main in this case). this could be the issue as iphones might not bother interpretting the old code in the same way.

text-align: center;

hth

the validator https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.charismacommunications.ca%2Fcontact.html is very useful as it will point things like this out. It’s good though as this is the only validation problem on your page

3

also long words might break out of the container so have a look at https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ as it explains what you need to do to get long words (such as your email) to wrap.

:slight_smile:

1 Like
4

So I can but a div tag to my contact content information?

5

you can but if i was you i’d probably remove the text-align:center; from the h2 and h3 elements, remove the align=“center” off the P tags and then just add text-align: center; to .main

.main {
    padding: 1px 0;
  text-align: center;
}
6

But will this not effect the entire site. The rest of the site works fine so far.

7

ah ok. in which case yes just put a div with a new class specific to the contact form page.

8

actually scratch that. You don’t need a new div just add an extra class on that page.

<div class="main contact">

you can then set a class called ‘contact’ which just specifies the alignment and anythings else you want to apply to the contact form div

.contact{ text-align:center;}

keeps it cleaner :slight_smile:

4 Likes
9

Hi there conquer2,

further to what @Noppy has pointed out, this…

a  {   
    word-break: break-all;
  }

…will take care of your link.

You should also obfuscate your mailto. :winky:

&#109;&#97;&#105;&#108;&#116;&#111;&#58;&#108;&#111;&#117;&#105;&#115;&#64;&#99;&#104;&#97;&#114;&#105;&#115;&#109;&#97;&#99;&#111;&#109;&#109;&#117;&#110;&#105;&#99;&#97;&#116;&#105;&#111;&#110;&#115;&#46;&#99;&#97;

coothead

1 Like
10

I apologize but what do you mean by obfuscate.

11

Yes, that is how we had set up the other pages on the site. So it is good to keep that same format going.

@conquer2, If you need any specific styling on your Accessibility page then you can create a new class for it too.


      <div class="main access">
        <h2>Web Accessibility</h2>

      </div><!-- .Main Content Ends -->
12

Does this help…

https://help.unc.edu/help/what-is-e-mail-address-obfuscation/

The answer that gave is just one of many possible solutions.

coothead

1 Like
13

I think I have it figured out now. If someone could look to confirm. that would be great.

14

On your contact page you have this…

      <div class="main">
        <h2>Contact</h2>
<div class="main contact">		  
		 
<h3>&nbsp;</h3>
<p align="center">Winnipeg, Manitoba, Canada.</p>
<p align="center">Email:&nbsp;<a href="mailto:louis@charismacommunications.ca">louis@charismacommunications.ca</a></p>

		  </div>	  
		  

      </div><!-- .Main Content Ends -->

You have nested another .main div within the original .main div, you can also eliminate the align=“center” attribute on the p tag.

This is all you really needed

      <div class="main contact">
        <h2>Contact</h2>
        <p>Winnipeg, Manitoba, Canada.</p>
        <p>Email:&nbsp;<a href="mailto:louis@charismacommunications.ca">louis@charismacommunications.ca</a></p>
      </div><!-- .Main Content Ends -->

If you want some margin below the <h2> then just adjust it in your css. No need for an empty <h3> tag.

That is what the .contact class is for, to set specific styles on that page. So more space under the h2 would look like this.

.contact {text-align:center;}
.contact h2 {
  margin-bottom: 3em; /*or what ever you need*/
}
15

I think I screwed something up.

16

You still have the nested div in there.

Look back to the code I posted below my comment… “This is all you really needed”

And you must add the new selectors to your css file as well

17

I added the CSS you mentioned.

.contact {text-align:center;}
.contact h2 {
margin-bottom: 3em; /or what ever you need/
}

18

You added it to a media query :disappointed:

Your stylesheets should always be built in a logical order. I tend to think of it as a list of styles that follow a document outline. You will notice that we had originally set up comments in there to help you see which styles were targeting specific pages. Keep that same format moving along as you add new styles.

/*--- End Bio & Equipment Page ---*/

/*--- Begin Contact Page ---*/
.contact{ text-align:center;}
.contact h2 {
  margin-bottom: 3em; /*or what ever you need*/
}

/*--- Media Queries ---*/

Remove those styles from the media query and set them up like I’ve shown above

EDIT:
Your html is still wrong too, you have this…

      <div class="main">
       
            <div class="main contact">
        <h2>Contact</h2>
        <p>Winnipeg, Manitoba, Canada.</p>
        <p>Email:&nbsp;<a href="mailto:louis@charismacommunications.ca">louis@charismacommunications.ca</a></p>
      </div><!-- .Main Content Ends -->

You need this…

      <div class="main contact">
        <h2>Contact</h2>
        <p>Winnipeg, Manitoba, Canada.</p>
        <p>Email:&nbsp;<a href="mailto:louis@charismacommunications.ca">louis@charismacommunications.ca</a></p>
      </div><!-- .Main Content Ends -->

We are not adding a new div, we are adding a new class to your existing .main div.

From this…
<div class="main">

To this…
<div class="main contact">

19

Ok changes made to HTML and CSS

20

That’s correct

You accidentally removed the closing curly bracket from the media query

@media only screen and (max-width: 500px) {

a  {
    word-break: break-all;
  }

Should be this…

@media only screen and (max-width: 500px) {

a  {
    word-break: break-all;
  }
}

Notice the extra closing bracket after the a closing bracket