Tagged: CSS, enfold, full width, google map, Widget
-
AuthorPosts
-
March 2, 2017 at 12:20 pm #754306
Hello Kriesi
I’m trying to get the Enfold Google Map Widget to be the full width & height (if possible) of it’s Colour Section.
I tried following the instructions contained in this post,
https://kriesi.at/support/topic/google-maps-full-width/
i.e. give the Colour Section an ID and add some Quick CSS, but it didn’t work.
#fullwidthmap .container { width: 100% !important; }
Any ideas?
Cheers
- This topic was modified 7 years, 8 months ago by LordLiverpool. Reason: forgot to mention height
March 4, 2017 at 1:11 am #755427I got the same problem.
The google maps widget was earlier shown in full width, after following custom CSS instructions on this post:
https://kriesi.at/support/topic/google-maps-full-width/Now since some time for some reason, the widget will not show in full widt anymore. I checked the custom CSS & widget details & details of the color section several times. It is exactly like instructed, except it doesn’t show fullwidt on front-end.
Did perphaps something changed in theme updates? I would very much appreciate it if you could help me out in this matter.
Thanks in advance!March 4, 2017 at 5:28 am #755469Hi,
Please try this instead:
#fullwidthmap .container { width: 100% !important; max-width:100% !important; padding:0 !important; } #fullwidthmap .container #avia_google_maps-6 { padding:0 !important; }
Best regards,
RikardMarch 4, 2017 at 10:36 am #755569Still no result.
This used to be the code in my custom css:
#fullwidthmap .container {
width: 100% !important;
}
#avia_google_maps-2 {padding: 0;}
.content .avia_google_maps_container {height: 222px;} {
width: 100% !important;
}Replacing it by the suggested code above, just removes the hight (because not mentioned), but the map itselve is still not full width.
Clearing cache, or changing browser/device, doesn’t make a change either.March 6, 2017 at 6:19 am #756163Hi,
This code is working when I check it in my browser but I can’t see any of the code I previously posted on your site, where are you adding it? Please try this in Quick CSS:
#fullwidthmap .container { max-width: 100% !important; padding:0 !important; }
Best regards,
RikardMarch 6, 2017 at 10:49 am #756288Hi Rikard, the slight changes in code seem to work in custom/quick css.
Now what’s left is just to match the hight of the color section with the hight of the widget, which used to be 222 pixels.March 6, 2017 at 10:51 am #756291Just fixed the hight with the next additional code in custom/quick css.
#avia_google_maps-2 {padding: 0;}
.content .avia_google_maps_container {height: 222px;} {
width: 100% !important;
}Thanks for support!
March 6, 2017 at 1:44 pm #756386Hi Rikard
Thanks for replying,
Your code worked:
#fullwidthmap .container { width: 100% !important; max-width:100% !important; padding:0 !important; } #fullwidthmap .container #avia_google_maps-6 { padding:0 !important; }
I added it code to my Enfold Child Stylesheet as Quick CSS was getting cluttered.
For anyone else be sure to clear the cache of your browser.
Cheers
March 6, 2017 at 1:47 pm #756391FEATURE REQUEST
Rather than users having to add custom CSS to their individual instances of Enfold
and thereby clogging up the Forum with repeated requests for the same thing over and overMay I request a new feature for Enfold of Height and Width Properties for the Enfold Google Map Widget.
This would bypass this issue in future releases of Enfold.Best Regards
March 7, 2017 at 7:44 am #756811Hi,
Thanks for the feedback. Please add your feature request https://kriesi.at/support/enfold-feature-requests/“>here, and we’ll have a look at including that in the theme.
Best regards,
RikardMarch 7, 2017 at 11:04 am #756887Hi,
Your link was malformed. For anyone else this is the correct link:
https://kriesi.at/support/enfold-feature-requests/
I submitted my feature request.
Thanks for your help fixing my problem Rikard.
Best Regards
- This reply was modified 7 years, 8 months ago by LordLiverpool.
March 8, 2017 at 7:31 am #757529 -
AuthorPosts
- You must be logged in to reply to this topic.