LenH Posted May 12, 2016 Report Share Posted May 12, 2016 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 Quote Link to comment Share on other sites More sharing options...
Merv Posted May 13, 2016 Report Share Posted May 13, 2016 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. Quote Link to comment Share on other sites More sharing options...
LenH Posted May 13, 2016 Author Report Share Posted May 13, 2016 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 Quote Link to comment Share on other sites More sharing options...
Merv Posted May 13, 2016 Report Share Posted May 13, 2016 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. Quote Link to comment Share on other sites More sharing options...
jayat1familytree Posted May 13, 2016 Report Share Posted May 13, 2016 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; Quote Link to comment Share on other sites More sharing options...
LenH Posted May 14, 2016 Author Report Share Posted May 14, 2016 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) Quote Link to comment Share on other sites More sharing options...
LenH Posted May 14, 2016 Author Report Share Posted May 14, 2016 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 Quote Link to comment Share on other sites More sharing options...
Merv Posted May 14, 2016 Report Share Posted May 14, 2016 Hi Len, A link to your site would be beneficial with diagnosing your problem. Quote Link to comment Share on other sites More sharing options...
LenH Posted May 14, 2016 Author Report Share Posted May 14, 2016 It's on the original post on this topic Merv http://www.huttonfamilytree.co.uk/genealogy/searchform.php Quote Link to comment Share on other sites More sharing options...
Merv Posted May 14, 2016 Report Share Posted May 14, 2016 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. Quote Link to comment Share on other sites More sharing options...
LenH Posted May 15, 2016 Author Report Share Posted May 15, 2016 Thanks for the suggestion Merv. Good idea. Quote Link to comment Share on other sites More sharing options...
Chris Lloyd Posted May 17, 2016 Report Share Posted May 17, 2016 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 Quote Link to comment Share on other sites More sharing options...
LenH Posted May 17, 2016 Author Report Share Posted May 17, 2016 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. Quote Link to comment Share on other sites More sharing options...
Chris Lloyd Posted May 18, 2016 Report Share Posted May 18, 2016 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> Quote Link to comment Share on other sites More sharing options...
klooster Posted May 20, 2016 Report Share Posted May 20, 2016 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) } Quote Link to comment Share on other sites More sharing options...
LenH Posted May 20, 2016 Author Report Share Posted May 20, 2016 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 Quote Link to comment Share on other sites More sharing options...
klooster Posted May 21, 2016 Report Share Posted May 21, 2016 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>. Quote Link to comment Share on other sites More sharing options...
klooster Posted May 21, 2016 Report Share Posted May 21, 2016 Correction: I meant: <div id="tng-center"> and then just before the </body> tag you need to put the </div>. Quote Link to comment Share on other sites More sharing options...
LenH Posted May 21, 2016 Author Report Share Posted May 21, 2016 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! Quote Link to comment Share on other sites More sharing options...
klooster Posted May 21, 2016 Report Share Posted May 21, 2016 Try to place an extra closing </div> just before the </body> tag in the footer.php of your theme! Quote Link to comment Share on other sites More sharing options...
klooster Posted May 22, 2016 Report Share Posted May 22, 2016 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! Quote Link to comment Share on other sites More sharing options...
LenH Posted May 22, 2016 Author Report Share Posted May 22, 2016 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 Quote Link to comment Share on other sites More sharing options...
LenH Posted May 22, 2016 Author Report Share Posted May 22, 2016 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 Quote Link to comment Share on other sites More sharing options...
klooster Posted May 22, 2016 Report Share Posted May 22, 2016 It is responsive on my iPhone! Quote Link to comment Share on other sites More sharing options...
LenH Posted May 22, 2016 Author Report Share Posted May 22, 2016 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.