Need the CSS to change Dusk to Dawn page maximum width

  • Unknown's avatar
    nwfwa · Member ·

    When embedding google calendar the css keeps shrinking the calendar width to 475 px and the events can’t be read. I did use the option in the CSS customization to increase the theme’s media width , but it is not working for the calendar code. I have also used “inspect element” and changed the 475 to 800 in there and the calendar temporarily widens but reverts when the page reloads. I do not know what css code to add in customization to eliminate whatever in the theme’s original code is rewriting the calendar code. Any help would be appreciated this is for our church and I dont know much about coding. I paid extra for Premium but it does seem there is something in Dusk to Dawn that is overriding the one option on media width that it gives

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    designsimply · Member ·

    I did use the option in the CSS customization to increase the theme’s media width , but it is not working for the calendar code.

    The “Media Width” setting works to expand media elements. When you do that, you also need to adjust the width of the page using CSS to make sure the content container element is wide enough—otherwise the embedded media will shrink to fit (as you noticed).

    Your current “Media Width” is set to 900, but the “.entry-content” element in the theme still defaults to 474px. To change that, you can update the width to 900px. Before that though, you will also want to adjust the width of the “#main” element to account for the difference in width you are adding. Finally, the background color won’t extend automatically (this is an older theme and isn’t designed to stretch like you want to stretch it), so you can just add a background color to “#main” and it looks pretty good. Here is an example all put together that will expand the “#main” container element to 1296px, which should give the “.entry-content” container enough room to expand to 900px:

    .page-id-141 #main {
	background-color: #EEEAE8;
	width: 1296px;
}

.page-id-141 .entry-content {
	width: 900px;
}

    The “.page-id-141” part of the selector limits the width change to just the http://thenarrowwayfellowship.com/calendar-of-events/ page because “page-id-141” is one of the classes listed for the “body” tag for that page. If you wanted to apply the change to all pages, remove “.page-id-141” from the selectors in the example.

    I have also used “inspect element” and changed the 475 to 800 in there and the calendar temporarily widens but reverts when the page reloads.

    Ah, yes. The problem you are describing with that sounds like a browser security restriction to me (which is normal). What happens is that you cannot edit content *inside* an iframe using CSS if the content is served through a different domain where you don’t have control. In the case of embeds like the Google Calendar, it is served in an iframe and Google does not offer the rights to access that page to modify it (this is a common security practice). What that means is that you cannot modify the design inside the embed directly with CSS. However, editing the “Media Width” combined with CSS to update the width of the media’s container elements (the example from above) should do the trick.

  • Unknown's avatar
    nwfwa · Member ·

    Thanks for your response.
    I will attempt to do this this. Its a bit scary to me though because it’s already a “live” website for our church and people are beginning to use it. A couple of questions re:

    Here is an example all put together that will expand the “#main” container element to 1296px, which should give the “.entry-content” container enough room to expand to 900px:

    1. Can I cut and paste that? ( except I’d might adjust the background color code)

    #2 will adding that background color ruin the background the template has already? with the artistic scroll at the top or is that an underneath layer?

    2. When I put it into the CSS customization box does it have to be on a certain “line” like the same number as the original code?
    Thanks again for your expertise, you can see I know very little.

  • staff-happychia · Staff ·

    1. Yes. please copy and paste it to the CSS Editor.

    #2. The template / body background remains the same. This code just changes the background of the “Calendar of Events” section.

    2. Just paste this CSS at the end of the (any) existing CSS in the CSS Editor. Line numbers does not matter.

  • Unknown's avatar
    nwfwa · Member ·

    Thank you am on it tonight

  • Unknown's avatar
    nwfwa · Member ·

    I put it in and it doesn’t change anything. Any other suggestions?

  • staff-happychia · Staff ·

    I can see that you have commented the following CSS, which is understandable. 

    .page-id-141 #main {
	background-color: # F7D683;
	width: 1296px;
}

.page-id-141 .entry-content {
	width: 900px;
}

    This style is indeed increasing the width of the page. The background color is not changing because you have a space between # and F7D683. Could you remove the space and try again.

  • Unknown's avatar
    nwfwa · Member ·

    I had done that ~ removed the space before the color code~ actually I am not seeing any change in the width of the page either.

  • Unknown's avatar
    designsimply · Member ·

    You have copied the CSS incorrectly.

    For example, you have this:

    #page-id-141

    But a “#” is for when the HTML is using an ID, and in this case the HTML is using a class so it should be a “.” instead like this:

    .page-id-141

    Past that, I re-tested the CSS example I gave you before, and I think there are some things missing from it because the content doesn’t get centered correctly and I didn’t notice it when testing before. Sorry about that! Please try the following revised CSS. You can delete all of the CSS from the editor you have now and then copy and paste the entire new example without modification and paste it into the editor in the panel at Appearance > Customize > CSS in your blog dashboard:

    .page-id-141 #page,
.page-id-141 #main {
	width: 1100px;
}

.page-id-141 #main {
	background-color: #f0f0f0;
}

.page-id-141 .full-width .entry-content {
	width: 1000px;
}

    It doesn’t make any adjustment to the width of a calendar, but I think that part will adjust on its own once the other adjustments are saved. Try it out.

  • The topic ‘Need the CSS to change Dusk to Dawn page maximum width’ is closed to new replies.