Huge top & bottom Margins
-
I am using Elementor for editing. When I use the ‘Shortcode” widget in Elementor, insert the ‘shortcode’ using the ICS format and inserting the link to VRBO’s .ics Calendar, A huge top & bottom margin appears when I view it live.
Here is the shortcode I used:
[ics_calendar url=”https://www.vrbo.com/icalendar/c00f5c6f70f94ea19c7abead3e353d0a.ics?nonTentative” title=”Gulf View Suites Calendar” description=”Check Availability – Rentals are Weekly – Saturday to Saturday”]I checked every column, section, etc… I even applied margins of 1 pixel to columns & sections to see what might make a change and nothing did.
Also, is there a way to have the ‘Month’ dropdown show 12 additional months? This is a vacation rental and many people book their next years vacation a year ahead of time.
The page I need help with: [log in to see the link]
-
I had a look at your source code, and this seems to be all due to padding/margins in the CSS of your theme, not the plugin, although it may be a secondary effect of the specific set of HTML tags the plugin uses, and how those combine in your site’s CSS to create huge margins.
You should be able to tighten things up using the following CSS, which could go into your theme (if it’s a custom/child theme), or into the Customizer under Appearance > Customize > Additional CSS:
section.ics-calendar { padding: 0; } h2.ics-calendar-title { margin-top: 0; }If you find this makes things too tight, especially on the bottom, you might want to try this for the first line instead:
section.ics-calendar { padding: 0 0 1.5rem 0; }It also looks like you may have a blank line/empty paragraph in the text block above the calendar, which is increasing the margin even further.
- The topic ‘Huge top & bottom Margins’ is closed to new replies.
