Home > Technical & Creative Skills > Programming, Servers & Scripts

HTML Issue With The Landing Page (7)


03-11-2021 09:16 PM #1 gobroke (Member)
HTML Issue With The Landing Page

I am having several issues with this landing page:

  1. It only works on the desktop and I need the LP to work on all devices. Are there simple scripts out there that I can paste on the <head> section to make it adaptable on all devices?
  2. The bullet points are positioned all the way to the left and the words on each bullet point don't line up with the above/below bullet point. Which HTML that I am missing?


03-11-2021 09:57 PM #2 platinum (Veteran Member)

Looks like the lander is missing some CSS.

That’s all you’ll need to make it responsive on all devices as well as fix the bullet points positioning.

If you ripped the lander, then most probably you either removed CSS from the original HTML header section, or unlinked the stylesheet file.


03-11-2021 09:58 PM #3 matuloo (Legendary Moderator)

Making a page to be fully responsible is not as simple as adding a tag. I will tag our inhouse designer here, he might be able to give you a few tips but really, it's not as simple as adding a tag here and there
@shishev can you point a fellow member to some places to learn about how to optimize pages for various devices?


03-11-2021 10:27 PM #4 jeremie (Moderator)

This lander has never been designed for mobile. All width properties are defined in pixels instead of % of the screen, so it needs work to convert it to mobile.


03-11-2021 10:36 PM #5 shishev (Moderator)

Was this done via some WYSIWYG builder?
@gobroke I am by no means anywhere near being a developer or anything. In fact, I haven't even sniffed code in ages but I can leave a few pointers.

Look into this Flexbox CSS thingamagic, seems pretty simple and should help get your page responsive:

These are 15-20min tutorials:

https://www.youtube.com/watch?v=aRMIdKRYg6c
https://www.youtube.com/watch?v=FTlczfR82mQ

This one's lenghty and also covers Grid (which I've never even tried)
https://www.youtube.com/watch?v=DJq6R2b0FoE

More stuff on Grid vs Flexbox:

https://css-tricks.com/css-grid-replace-flexbox/

These bullet points should probably be put inside their own container of some sort.

I've no clue what I'm talking about, could probably figure this out with some time on my hands but not immediately.

Honestly, since this is for an affiliate campaign I'd just use some sort of page builder like Webflow/Instapage/Leadpages/Unbounce/Clickfunnels etc. and get this thing up and running ASAP, especially if yer not super enthusiastic about code, like me.

P.S. This isn't your final lander version in terms of copy and images, is it?

It better not be (ಠ_ಠ)


03-11-2021 10:52 PM #6 jaybot (Veteran Member)

That’s a simple af page. If you can’t code it up to be responsive by yourself, someone on fiverr will do it for you.


03-12-2021 11:05 PM #7 gobroke (Member)

No, @shishev. I didn't use any WYSIWYG builders and I just coded myself. Thanks for the tutorial links and I will watch them tonight. I used Instapage but I felt it's very hard to use and has many limitations.


Home > Technical & Creative Skills > Programming, Servers & Scripts