Highlighted

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

New Here ,
Sep 24, 2020

Copy link to clipboard

Copied

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!

TOPICS
Code, Other

Views

94

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

New Here ,
Sep 24, 2020

Copy link to clipboard

Copied

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!

TOPICS
Code, Other

Views

95

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 24, 2020 0
Adobe Community Professional ,
Sep 25, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 25, 2020 0
LEGEND ,
Sep 25, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 25, 2020 0
Adobe Community Professional ,
Sep 25, 2020

Copy link to clipboard

Copied

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. 

image.png

Scan your site through Why No Padlock

https://www.whynopadlock.com/

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 25, 2020 1