Support ForumFull Width Section Map – Support Forum

Full Width Section Map

roblutter — Thu, 22 Aug 2013 10:25:56 +0000

Hi there,

I want to make a full/browser width map for a section halfway down page.

But I cannot get the map to go browser width, it works in the lead section but I need this halfway down the page as a content break/section…

thanks…

Reply To: Full Width Section Map

IshYoBoy — Thu, 22 Aug 2013 18:19:31 +0000

Hi Rob,

Assuming you have unboxed page layout, the map should be put in a page-break and make sure to add a css_class which can then be used to add custom css styles.

[page_break full_width="yes" css_class="my-fullwidth-map"]

[map lat_lng_1="36.5099367, -4.8863523" zoom="15" color="" invert_colors="no" height=""]

[/page_break]

[page_break full_width="yes" css_class="my-fullwidth-map"]

[map lat_lng_1="36.5099367, -4.8863523" zoom="15" color="" invert_colors="no" height=""]

[/page_break]

Then, add the following styles to the “Custom CSS” field under Theme Options -> General Options:

/* Full-width Google Map */
.my-fullwidth-map, .my-fullwidth-map .row {
	padding: 0;
	margin: 0;
}

/* Full-width Google Map */

.my-fullwidth-map, .my-fullwidth-map .row {

padding: 0;

margin: 0;

}

This should do the trick. Please let us know.
Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Full Width Section Map

roblutter — Thu, 22 Aug 2013 19:21:12 +0000

Cool. Didn’t quite work…

https://thelifecycle.roblutter.com

Reply To: Full Width Section Map

IshYoBoy — Thu, 22 Aug 2013 20:22:57 +0000

Hey,

It works, however, there are many validation errors both in the HTML and the CSS.
We strongly recommend to resolve as many as possible if you wish the page to work smoothly.

1. HTML Validation

Although we believe this particular problem can be solved only by eliminating the CSS errors inside the “Custom CSS” field, we strongly recommend eliminating as many as possible of these errors:

https://validator.w3.org/check?uri=http%3A%2F%2Fthelifecycle.roblutter.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

2. CSS Validation

Please copy and paste the CSS from the “Custom CSS” field into the validator and eliminate the problems one by one. If an error occurs in the CSS all style from that point are ignored. This is why the class we suggested adding (.my-fullwidth-map) did not work. There must be a CSS error in the lines above it. Maybe try adding the style in the complete beginning of the “Custom CSS” field. But anyway, you should fix the errors.

https://jigsaw.w3.org/css-validator/#validate_by_input

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Full Width Section Map

roblutter — Sat, 24 Aug 2013 09:33:26 +0000

I don’t have a clue with any of all that. But, thanks.

Reply To: Full Width Section Map

IshYoBoy — Sat, 24 Aug 2013 10:23:37 +0000

Hi,

There are many typos in the CSS Styles that are inside “Custom CSS” field. Where you the one who wrote them? If not, please contact the person to fix them. Here are the errors:

E.g.:

– “.row. fade” should maybe be either “.row.fade” or “.row .fade” based on the meaning.

– “.fyre. .body.editable” – again the syntax is wrong.

…

These problems cause all CSS entered after them to be ignored. Try to move the CSS we suggested to the complete front of the “Custom CSS” field and not on the complete bottom as it is right now.

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market