Docs

[peyton_dcosta]

Hey X team, Happy New Year!

I am in need of your expertise again and for a number of issues as I just took my site live and could only ask you for help now. Sorry for unloading all these issues at once.

This is my website http://www.lift-jesus-higher-rally.ca

1) In my superfly menu if you go to the directions button and click on it, you will notice my google maps does not display properly. I need a fix as I have no idea what the issue is. I have already put in the API key for Google Maps.

2) If you resize the window to tablet (vertical and horizontal) or cell phone(vertical and horizontal) you will see that the slider gets a massive white space above it and in some cases below it. I need to get rid of this. I chose to have full screen slider and on resizing it should still be a full screen slider.

3) Again with resizing to a smaller screen, if you go into the superfly menu, and click on directions, contact us or Buy Ticket, you will notice that the heading gets extremely small. I need the size to remain proportional to the screen size.

4) With resizing the window again to a smaller size, you will see that one of my sections called “Speakers”, as you scroll down on my site, completely disappears. Not sure why or how I can fix this.

5) If you go to the speakers page, you will see that on smaller screens the alignment of the content boxes shifts that is speakers 1 & 2 align 3&4 align and so on but between 2&3 4&5 etc. there is a huge gap. I need them to be touching just like when in large screen mode.

Sorry for all these questions again but since I just came on a live site it is the only way I could get your help.

Thank you and sorry once again but please HELP!!!!

[Rad]

Hi there,

Thanks for posting in.

1. The map takes its size from the container where it’s added, and on your menu, it’s hidden which means it follows the initial width of your menu. The map needs to be re-initialized after opening the menu so it would take the size of the window.

Please try adding this CSS to Admin > Appearance > Customizer > Custom > CSS

.sfm-custom-content {
width: 100%;
}

2. Please choose auto-responsive slider instead of the fullscreen slider. It’s trying to fill the height but maintaining the size of the photo. If you wish to maintain fullscreen then you have to make the image fill the height too. But that’s not going to look okay, it will stretch and blurry.

It’s the same concept for videos, if your video is 4:3 and watch it on 16:9 screen then black area appears.

3. Would you mind providing your login credentials in private reply? The font size is added as VW while it’s transformed creating more space that shrinks it.

4. Would you mind providing a screenshot? I only see “Speakers” on desktop and mobile.

5. It’s due to 160px padding that you added to your column’s class. Instead of adding padding manually, let’s do it with CSS.

a. Please remove those paddings.
b. Add this CSS

@media ( min-width: 768px ) {
    .padding-top-160 {
        padding-top: 160px !important;
    }
}

c. Edit those column where the 160px is removed then add padding-top-160 to its class input.

Hope these helps 🙂

[peyton_dcosta]

This reply has been marked as private.

[Christopher]

Hi there,

#1 Please provide us with screen shot

#3 Add following CSS to customizer :

@media (max-width:767px){
.sfm-content-wrapper > div:first-of-type {
    font-size: 25px !important;
}
}

#5
a) It’s displaying fine, check the attachment.
b) It’s related to custom classes and CSS you already added to this page, please remove them.
c) Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Hope it helps.

[peyton_dcosta]

Hey Chris,

Thank you for getting back to me. As always your help is very much appreciated.

Ok so some things worked, some things didn’t.

1) As requested please find a screen shot of the map not displaying properly.
3) Did this problem take place because the font size was added as VW instead of PX?
5) Here is a link to what I want to create https://www.we.org/we-at-school/. I’ve also added a screen shot. The layout should look like picture, text, picture, text. The text should be centred vertically to the image next to it and horizontally to the image above it. When resizing the window for smaller screens ie. tablets and cellphones the layout should be picture, text, picture, text one above the other. I’ve added a screen shot for this too.
a) Gemma’s picture and bio does show up but randomly. I have attached a screen shot of what I am seeing on my end in both Safari and Firefox browsers. It shows and then doesn’t show on refresh.

Thank you again for all your help.

[peyton_dcosta]

The files didn’t attach so here are the screen shots again for #5

[peyton_dcosta]

Another try.

[Joao]

Hi There,

1- On which page have you placed your contact form? Please provide the URL

3- Could be I recommend you using px or em instead.

5- You will need to create a layout for tablets and mobile and another for other screensizes. Use Cornerstone hiding based on resolution feature to hide and show according to the size of the device.

a) Please clean your browser cache´s and check it again.

Thanks

[peyton_dcosta]

Hey Joao,

1) I am not sure what you are referring to but I needed help with the map, not the contact form. Here is the link to the map which is on the main page inside the Menu–>Directions http://www.lift-jesus-higher-rally.ca

3) Ok thank you, will fix that.

5) Are you saying that I have to create two separate layouts one above the other and display one of the layouts based on screen size? Would this increase page load time?

a) I tried this on a completely different computer and a tablet with the similar results. For the tablet I had to keep scrolling upwards and after like two tries her section loads.

[Rad]

Hi there,

1. Having a hard time re-rendering the map since it uses API. And all map instances are local to xData.api which inaccessible. How about you use iframe based map this time, with this, we can re-render the map by reloading it. The only way to fix it is re-rendering once it open to introduce new container dimension.

5. It may but if it’s just loading the same image, it still counts one load process. Same performance, just different layout. It may contribute to page size but too small since the layout is just based on HTML which is texts.

a. How about a video recording? It loads so fast and not sure what should I notice by looking at it.

Thanks!

[Author]

Posts