Hi everybody,
I am searching for the option to apply full page view to any page of the sydney theme.
I know that it is possible to define that for each page separately. But I wonder if there might be one place (.css file) where some custom code has just to be placed once to achieve that?
Thanks in advance for your help!
cheers Karsten
Hi Karsten,
Thank you for reaching out to us here.
I’d like to help with CSS code solution. But, I need direct inspection to your pages to check whether you did special configuration or not. So I can get best possible code solution to suggest.
Regards,
Kharis
aThemes Support
Dear Kharis,
sorry for my late reply. It took me some time to bring my website online.
Here u go now: petrolblueocean.org
As you can see, I already managed to enlarge the page width for some pages like: http://petrolblueocean.org/plastikproduktion/
because I enlarged these pages with the widged that is designed for this purpose:
Unfortunately this does not work the same way for the listings websites like: http://petrolblueocean.org/directory-organisation/listing/plastic-bank/
I helped myself to enlarge these sites too by assigning the following custom css to the css class:
.drts-display–detailed
But this code did not enlarge it as wide as the “full width” of the template AND these sides do not fullfill the responsive design approach anymore.
So my question for you is now: Is there any central place where I can put any custom css code in which
cheers Karsten
Hi,
Have you tried the ‘Front Page’ template instead of ‘Full width’?
Additional CSS is not needed for this case since Sydney theme has already had a specific page template for that purpose. You just need to enable the ‘Front Page’ template on all your pages.
Regards,
Kharis
aThemes Support
Hello Kharis,
compared to the “full width” template, the “front Page” template does not make the text display any wider. Instead, it omits the web page header and the distance to the header image is missing (please the the following picture).
So the page looks much worse! But it is also not necessary that the text is displayed wider than “full width”! The template “full width” is completely sufficient for all “pages” I actively create!
Unfortunately, the plugin “Directories Pro” generates new pages when you click on any company entry here: http://petrolblueocean.org/organisationen/ (like “Plastic Bank” or “4Ocean”). For each single entry (company) page it seems (but I am not a coder who can realy assess it!) that the Plugin generates single listing pages “on the fly” when a listing entry is activated (by clicking on it). Then the CSS Class “.drts-display–detailed” is read out by the Plugin.
As I already wrote I tried to influence this class with the following code:
.drts-display–detailed
{
width: 100vh;
}I tried to and the
but unfortunately I did not achieve the desired width and these pages are not responsive compliant anymore!
So may be you have a better idea?
with kind regards
Karsten
Hi Karsten,
Thank you for getting back.
As inspected further, if I got it right, you’ll add the below CSS code to Appearance > Customize > Additional CSS from dashboard.
#drts-body .drts-display--detailed {
width: 100%;
}
@media only screen and (min-width: 992px) {
.single-organisation_dir_ltg .content-area.col-md-9 {
width: 100%;
}
}
Regards,
Kharis
aThemes Support
Dear Kharis,
thanks a lot! Your code works well!
Just a small last question in this regard:
What value in this code would I need to change if I wanted the width to be a tiny bit wider 
?
Or is that not possible because the website would then not longer react responsively?
with kind regards
Karsten
Hi Karsten,
Thank you for trying the code.
Try this code:
#drts-body .drts-display--detailed {
width: calc(100% + 30px);
margin-left: auto;
margin-right: auto;
}
@media only screen and (min-width: 992px) {
.single-organisation_dir_ltg .content-area.col-md-9 {
width: calc(100% + 30px);
margin-left: auto;
margin-right: auto;
}
}
Regards,
Kharis
aThemes Support