{"id":1407296,"date":"2017-12-16T22:33:21","date_gmt":"2017-12-17T06:33:21","guid":{"rendered":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/remove-padding-at-top-of-single-event\/"},"modified":"2017-12-16T22:33:21","modified_gmt":"2017-12-17T06:33:21","slug":"remove-padding-at-top-of-single-event","status":"closed","type":"topic","link":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/remove-padding-at-top-of-single-event\/","title":{"rendered":"Remove padding at top of single event"},"content":{"rendered":"

Hi,<\/p>\n

I am having trouble figuring our a solution and I am hoping someone can help. <\/p>\n

I have a hero image at the top of my page followed by text. I am using The Events Calendar PRO and the Avada theme. In the single event page I have three containers with differnt image sizes for small, medium and large screens. I styled these to work in a normal page in Avada. I am now trying to make event pages and match the same style. Everything looks great but in the “small” view (screens below 768px there is a white bar between my top menu and the top of the image. I do have the top margins set to -92 on the images so they suck right up to the menu and it works with the “medium” and “large” images but not the “small”. It’s like there is extra spacing being added somewhere in the events page. <\/p>\n

I used chrome inspect and found this line: <main id=”main” role=”main” class=”clearfix width-100″ style=”padding-left:0px;padding-right:0px”> if I add: margin-top: -92px; the issue is resolved. I’m just not sure how to implement that change.<\/p>\n

I searched the forum for answers and found this css solution:<\/p>\n

.single-tribe_events #main .fusion-row {
\nmargin-top: -92px;
\n}<\/p>\n

But when I do that everything gets moved to the top. The image, the title in the image and the text below now sits over the bottom of the image. <\/p>\n

I would like to just move the image up and keep all the other padding the same and ideally, I would be able to do this only when the image and text are seen on small screens as it’s not affecting the setting for my medium and large set-up. <\/p>\n

The site isn’t live yet so I can’t post the link but I can share it in a private reply. I also took a few screenshots which will help illustrate the problem.<\/p>\n

Thanks for taking the time to help! <\/p>\n","protected":false},"template":"","class_list":["post-1407296","topic","type-topic","status-closed","hentry"],"yoast_head":"\nRemove padding at top of single event -<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/remove-padding-at-top-of-single-event\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Remove padding at top of single event -\" \/>\n<meta property=\"og:description\" content=\"Hi, I am having trouble figuring our a solution and I am hoping someone can help. I have a hero image at the top of my page followed by text. I am using The Events Calendar PRO and the Avada theme. In the single event page I have three containers with differnt image sizes for […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/remove-padding-at-top-of-single-event\/\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/remove-padding-at-top-of-single-event\/\",\"url\":\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/remove-padding-at-top-of-single-event\/\",\"name\":\"Remove padding at top of single event -\",\"isPartOf\":{\"@id\":\"https:\/\/theeventscalendar.com\/support\/#website\"},\"datePublished\":\"2017-12-17T06:33:21+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/remove-padding-at-top-of-single-event\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/remove-padding-at-top-of-single-event\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/remove-padding-at-top-of-single-event\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/theeventscalendar.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Topics\",\"item\":\"https:\/\/theeventscalendar.com\/support\/topics\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Calendar Products\",\"item\":\"https:\/\/theeventscalendar.com\/support\/forums\/forum\/events\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Events Calendar PRO\",\"item\":\"https:\/\/theeventscalendar.com\/support\/forums\/forum\/events\/events-calendar-pro\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Remove padding at top of single event\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/theeventscalendar.com\/support\/#website\",\"url\":\"https:\/\/theeventscalendar.com\/support\/\",\"name\":\"\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/theeventscalendar.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Remove padding at top of single event -","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/remove-padding-at-top-of-single-event\/","og_locale":"en_US","og_type":"article","og_title":"Remove padding at top of single event -","og_description":"Hi, I am having trouble figuring our a solution and I am hoping someone can help. I have a hero image at the top of my page followed by text. I am using The Events Calendar PRO and the Avada theme. In the single event page I have three containers with differnt image sizes for […]","og_url":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/remove-padding-at-top-of-single-event\/","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/remove-padding-at-top-of-single-event\/","url":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/remove-padding-at-top-of-single-event\/","name":"Remove padding at top of single event -","isPartOf":{"@id":"https:\/\/theeventscalendar.com\/support\/#website"},"datePublished":"2017-12-17T06:33:21+00:00","breadcrumb":{"@id":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/remove-padding-at-top-of-single-event\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/theeventscalendar.com\/support\/forums\/topic\/remove-padding-at-top-of-single-event\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/remove-padding-at-top-of-single-event\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/theeventscalendar.com\/support\/"},{"@type":"ListItem","position":2,"name":"Topics","item":"https:\/\/theeventscalendar.com\/support\/topics\/"},{"@type":"ListItem","position":3,"name":"Calendar Products","item":"https:\/\/theeventscalendar.com\/support\/forums\/forum\/events\/"},{"@type":"ListItem","position":4,"name":"Events Calendar PRO","item":"https:\/\/theeventscalendar.com\/support\/forums\/forum\/events\/events-calendar-pro\/"},{"@type":"ListItem","position":5,"name":"Remove padding at top of single event"}]},{"@type":"WebSite","@id":"https:\/\/theeventscalendar.com\/support\/#website","url":"https:\/\/theeventscalendar.com\/support\/","name":"","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/theeventscalendar.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/topic\/1407296","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/types\/topic"}],"version-history":[{"count":0,"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/topic\/1407296\/revisions"}],"wp:attachment":[{"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/media?parent=1407296"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}