Skip to main content
C
Clayton5C50
Participant
September 24, 2020
Question

Problems With DropDown Menu, Section Width, and Centering Objects on a Page

  • September 24, 2020
  • 2 replies
  • 414 views

http://911contents.com/

I'm having some problems with my website, the current page I'm working on is specifically the one that link leads to (the home page). I ran it through the w3c validator and I'm getting no errors from the page.

The issues I'm running into right now is that on the mobile layout for the site, I have a button implemented that should make a dropdown menu appear upon clicking it, but for some reason nothing happens when I click it. The button appears on both phone and tablet layouts of the page.

Another issue I'm having is that I want to make the Pay Now button, and the Customer Reviews section on the page 100% in width, and I want them to be centered, but using

var default_width = "100%";
var outer_width = "100%";

in the javascript doesn't seem to work. Also, using <div style="text_align:center"></div> and <p style="text_align:center"></p> didn't seem to work when attempting to center those sections.

Does anyone here know a solution for this? Any and all help is appreciated!

This topic has been closed for replies.

2 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
September 25, 2020

If only you had used a standardized framework like Bootstrap, we'd have something solid to work with.  But I see no evidence of Bootstrap or anything close to it.  I see a mishmash of Fancybox, parallax, various widgets & a whole lot of inline styles.  Inline styles are OK for emails but they are counterproductive and rarely used on websites. 

 

Ideally, HTML pages should not contain styles, at least not in the markup. It's more efficient to create external  stylesheets to which all HTML files are linked. 

 

Another important issue:

1.  Your server is not secure. This doesn't instill much confidence.  But more importantly, some browsers block content over non-secure (HTTP) servers.  Ask your host about SSL/TLS certificates.  Even free ones from Let's Encrypt and Cloudflare are better than nothing. 

Scan your site through Why No Padlock

https://www.whynopadlock.com/

 

Nancy O'Shea— Product User & Community Expert
    B
    Community Expert
    Ben MCommunity Expert
    Community Expert
    September 25, 2020

    Looking at the menu first, the console is throwing 2 errors at me:

     

    1. the variable "myfunction" does not exist

    2. 404 error on the following JS file that is included: https://connect.podium.com/static/js/main.d411c39f.chunk.js.map

     

    I am thinking there may also be CSS missing because when I view the page on a desktop I see the hamburger menu icon at the top next to the phone number so it is visible on all viewports.  Can you verify that all files are uploaded for this script that you chose?

     

    For the pay now button, you have this line around the button:

     

    <div id="cpa9c84d3b19" style="margin:10px 0;text-align:center" onclick="document.getElementById('pay_now_form_eb795a5d38').submit()">

     

    As you are setting the left and right margin to "0" with that code, it is pushing your content to the left.  Change the "0" to "auto" and your content will center.

     

    For the reviews, add that same margin to your iframe and that will center there as well.  

     

    As a side note, while you are using Bootstrap, the code could be cleaned up and optimized to use bootstrap's grid to help you layout objects more effectively and center things without having to do all of the margin changing we did.  I would recommend reading up a bit more about the layout elements and learn how to use them further.

    O
    osgood_
    Legend
    September 25, 2020

    I looked at the hamburger problem yesterday and I think the layout is corrupt, too many inline css styles to sort through to find the isue. The hamburger is confusing because is it the one with the three lines sitting within the circle, above the logo, or is it he small one, next to the main menu. If its the circle option then it can't be clicked on to evoke the mobile menu option because something is obscuring it, like sitting ontop of it because of all the 'funny' css. Ideally I would say the top section of that website needs to be rewritten in a less chaotic way.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices