CSS Question

[LenH]

I would be very grateful for some guidance please

I am trying set my data to be centralised with a 1080px width rather than completely across the page. For example:

http://www.huttonfamilytree.co.uk/genealogy/searchform.php

The CSS required to achieve this has defeated me.

Can anyone help please?

Len

[Merv]

Hi Len,

The link you shared is a responsive website as far as I can see.

If you want a fixed width/non responsive look , you could try integrating with a fixed width wordpress theme.

Others on here may provide other options.

[LenH]

Hi Merv

Thanks for your response.

Yes it is a responsive site. I want it to remain responsive but sit within the middle 1080px of the screen and react accordingly when viewed on smaller resolution devices.

That's the ideal anyway

[Merv]

Hi Len,

I see what you mean now.

Yes, many of our sites don't display very well on FHD screens. The biggest problem is that we can end up with very long lines of text spread across the whole length of the page which not only looks like a challenge to read, it is a challenge to read.

This isn't too much of a problem if you choose a 3 column template like template 8, but even then, when making up custom pages like help pages, you will eventually encounter the problem of long lines of text. To counter this, I have used html to make the text a little larger on some of my custom pages.

Personally, I'd like to see responsive text implemented in which the size of the text increase on FHD screens. Although this is something I could probably do myself.

Good luck with your pursuit.

[jayat1familytree]

Len,

 

CSS is NOT my strongpoint, but have you tried changing your

body}

to also include;

    margin: 0px auto; /*--centers the container on the page, needs width--*/
    width: 100%;
    text-align: left;

 

 

 

[LenH]

15 hours ago, Merv said:

Hi Len,

I see what you mean now.

Yes, many of our sites don't display very well on FHD screens. The biggest problem is that we can end up with very long lines of text spread across the whole length of the page which not only looks like a challenge to read, it is a challenge to read.

This isn't too much of a problem if you choose a 3 column template like template 8, but even then, when making up custom pages like help pages, you will eventually encounter the problem of long lines of text. To counter this, I have used html to make the text a little larger on some of my custom pages.

Personally, I'd like to see responsive text implemented in which the size of the text increase on FHD screens. Although this is something I could probably do myself.

Good luck with your pursuit.

Thanks Merv for this and your good wishes 

For a non coder such as myself Wordpress has offered the greatest amount of control (the Kloosterman articles on this have been excellent - I could not have done it without them)

[LenH]

16 hours ago, Merv said:

 

This is a reply to Jay. For some reason the forum software insists on inserting Merv for reasons I cannot fathom!

Thanks so much for your suggestion. I tried it with a 1080px and this centralised the data just fine. However, it threw the top menu off to the right and also made the data no longer responsive.

It's definitely a step in the right direction though so thanks for that. I will get there eventually......

This is fiendishly complicated for a relative non coder 

[Merv]

Hi Len, A link to your site would be beneficial with diagnosing your problem.

[LenH]

It's on the original post on this topic Merv 

http://www.huttonfamilytree.co.uk/genealogy/searchform.php

[Merv]

Hi Len,

I didn't realise it was your site. It's looking great.

It would appear that Cees Kloosterman is a website designer. His "How I made my TNG-WP website" page seems to outline everything you need to know except how to center the TNG pages. He seems like a helpful chap. I would try contacting him for advice and suggest that he adds the instructions to this page. There may be plenty of others who are/may find themselves in the same situation.

[LenH]

Thanks for the suggestion Merv. Good idea.

[Chris Lloyd]

Try adding this to the css:

#wrapper{
   width:960px;
   margin:0 auto;
}

 

And then use a div with the id of wrapper - don't forget to  the close the div

[LenH]

Many thanks Chris for your suggestion. I understand what you mean. I have been looking at the code on the page but I cannot work out what needs to go inside the div id.

Sorry but my coding knowledge is minimal.

[Chris Lloyd]

Hi

Immediately after the <body> tag you need to insert <div id="wrapper"> and then just before the </body> tag you need to put </div>

 

[klooster]

Try this:

 

/* Ipad landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { .widthform {width: 690px !important;}

and ( margin:0 auto) }

[LenH]

Many thanks Chris for your suggestion but that had no effect

Thank you also Cees for your code. I have just tried that and no effect

[klooster]

Hi Len,

Try this:

You want to center a a DIV Block without centering the text Inside and a fixed width of 1080 pix.

I have no experience with the DIVI theme, but CSS rules do not differ in any theme. If I look at your website it seems it is a full width site with center CSS ID for centering the main content.

If  I Iook at the code of a normal page within your website, the texst block is centered with the next ID.

<div id="main-content">  CONTENT </div>

You can use an ID, short for a fragment identifier. for  any elements that are simply used once on a page.

The standard CSS way to center a block, but not the text inside and a fixed with is as follows (I named the ID tng-center)

#tng-center {
margin-left:auto;
margin-right:auto;
width:1080px
}

To be sure it overrules any other CSS put “! Important” behind every line, as follows:

#tng-center {
margin-left:auto !important;
margin-right:auto !important;
width:1080px !important;
}

Now somehow the TNG pages on your website do not pickup this CSS rule of the normal DIVI pages.

So you have to make a ID (#tng-center ) in your genstyle.css or mytngstyle.css. Just to be sure put it also in the style.css of your theme.

Then find the header.php of your DIVI theme and put immediately after the <body> tag 

<div id="tng-content"> and then just before the </body> tag you need to put the </div>.

[klooster]

Correction:

I meant:

<div id="tng-center"> and then just before the </body> tag you need to put the </div>.

[LenH]

Thank you very much Cees for this.

It centres the TNG data in a 1080 width and is responsive BUT the top menu moves further across to the right instead of being centred 1080 and the footer becomes centred 1080 instead of full width on anything but the homepage.

For example: http://www.huttonfamilytree.co.uk/genealogy/surnames.php

I don't have a <body> </body> in my header.php. Instead I have a "<body <?php body_class(''); ?>>" which complicates matters (well for me anyway) somewhat so I created a tng-center class instead to create: "<body <?php body_class('tng-center'); ?>>"

I created the class tng-center thus:

.tng-center {
margin-left:auto !important;
margin-right:auto !important;
width:1080px !important;
}

I am certain this is not quite right but it does centre the TNG data but also adversely affects everything else

Clearly something is wrong with my additional coding but we are close now!

 

[klooster]

Try to place an extra closing </div> just before the </body> tag in the footer.php of your theme!

[klooster]

Put the <div id="tng-center">  direct after the <body <?php body_class(''); ?>> and an extra closing </div> just before the </body> tag in the footer.php of your theme!

 

[LenH]

Thank you very much Cees for the additional suggestion

so to summarise I added:

#tng-center {
margin-left:auto !important;
margin-right:auto !important;
width:1080px !important;
}

to genstyle.css and in my main theme css

I added <div id="tng-center"> after  <body <?php body_class(''); ?>>  in header.php and placed </div>  just before the </body> tag in footer.php

This again centred the TNG data in a 1080 width but moved the header across too far. 

I then moved tng-center id to outside of the top menu area in header.php and the top menu now works fine. It has altered the homepage so that everything is 1080 centred but that's fine.

My only problem now is that the TNG data is no longer responsive. Unless you can see an easy solution to that Cees my website visitors will have to live with that

 

[LenH]

Update - just had a note from Cees and he has spotted the site is responsive!

It appears my desktop PC Chrome responsiveness tester does not work properly on my own site. Never had this problem before.

Lesson learned

[klooster]

It is responsive on my iPhone!

[LenH]

Can I say a huge thank you to Merv, Chris and Cees for their very kind assistance.....and patience with a non-coder 

You've been great!

Right, now I shall follow Cee's instructions to get rid of the double title etc tags.....I can see him ducking for cover already