Website Review Greatly Appreciated

Site URL: https://www.coastalathletics.net/

I hope everyone is having a great weekend! Feedback on this site would be greatly beyond amazing.

This is a youth athletic training facility. I will list some sites below which are similar in the industry that I want to eventually get the site to look like. 

The main image on the home page is kind of giving me issues when I do stack like it is now its a little big but when I do inline its a bit to small. Any suggestions on this?

https://thedirtbags.com/ 

https://canesbaseball.net/

http://grandslamusa.biz/

Thank you in advance!

1. I see right white bar here..

2. Some pages have long content on mobile. You can consider adding a back to top button.

3. It looks like you can't click burger icon on tablet.

41 minutes ago, tuanphan said:

1. I see right white bar here..

2. Some pages have long content on mobile. You can consider adding a back to top button.

3. It looks like you can't click burger icon on tablet.

That's strange I did not notice the white line originally when I made live... any idea to what causes this?

Thank you for your other remarks too it is beyond appreciated.

3 hours ago, Patterson said:

I did not notice the white line originally when I made live... any idea to what causes this?

It is the Google map in the footer. It is too wide and overflows on the right causing the white line. Not sure of a fix off the top of my head. But at least you know where the problem is!

Try replacing, make a copy somewhere, the iframe in your code block with the following.

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3519.043172835495!2d-77.87225248463027!3d34.302491480538585!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89a98ba7ee3b9a81%3A0x16703732deb581cf!2sCoastal%20Athletics%20By%20Fletcher!5e1!3m2!1sen!2sus!4v1607351745040!5m2!1sen!2sus" frameborder="0" style="border:0; min-height: 200px; width: 100%;" allowfullscreen="" aria-hidden="false" tabindex="0">

  </iframe>

Let us know how it goes.

19 minutes ago, creedon said:

Try replacing, make a copy somewhere, the iframe in your code block with the following.

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3519.043172835495!2d-77.87225248463027!3d34.302491480538585!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89a98ba7ee3b9a81%3A0x16703732deb581cf!2sCoastal%20Athletics%20By%20Fletcher!5e1!3m2!1sen!2sus!4v1607351745040!5m2!1sen!2sus" frameborder="0" style="border:0; min-height: 200px; width: 100%;" allowfullscreen="" aria-hidden="false" tabindex="0">

  </iframe>

Let us know how it goes.

It worked!  Thank you very much... which part of the html did you tweak the width?

2 minutes ago, Patterson said:

which part of the html did you tweak the width?

It all takes place in the iframe tag in the code block. I removed the height and width attributes of the iframe tag and then added a style attribute to control height and width. The real magic was setting the width to 100% so it only fills 100% of the containing parent. Previously with a fixed width it overflowed as we saw.

Well sweet thank man. I was having this issue on another site as well. 

Do you have design suggestions? Trying to make it look to the standard of the other sites mentioned above.

Thanks!