Inspiring

Question

Responsive code got broken

17 replies
1301 views
Translate

This site is a work in progress.

Somehow I’ve broken the responsive code (css: media query for mobile) that I’d borrowed from this previous (mostly) working but unfinished page . I say (mostly) working because in the mobile version, the whole button needs to highlight on hover, not just the text. I've gone over it line by line but not catching whats wrong...

This topic is closed to new replies. Start a new post to keep the conversation going.

Sil.C

Community Manager

Just testing to see if I can reply based on this thread.

Translate

Nancy OShea

Community Expert

Use a Bootstrap Starter Template. It will cut hours off development time and give you a mobile-first, responsive web page to work with.

Go to File > New Starter Templates > Bootstrap Templates > choose a layout and hit the Create button.

SaveAs index.html.

Translate

Nancy O'Shea— Product User & Community Expert

T

TheOriginal150mphAuthor

Inspiring

I don't get the appeal of Bootstrap. So I start with the Portfolio template. Without any input, just viewing minified CSS, it has over 151,000 characters! That's 45 Word pages of minified CSS text, before I even get started. The hundreds of elements and descriptors defies any elementary understanding. Unless you're swapping out text and images exactly using WYSIWYG, or never open the CSS, customizing from this template is a nightmare without advanced coding knowledge. Even if I just wanted to grab some of the responsive code for use in my own simple page, it's really just impossible as it's spread throughout the template.

So, yes, thanks, I checked it out and gave up. I post here because I'm trying to (re)learn only the most basic necessary code needed, that I can understand and edit.

Translate

Nancy OShea

Community Expert

If building responsively was so simple, everyone would be doing it without the need for frameworks. But as you're finding, it's not so simple, especially when you have no coding skills. So pick your poison:

Learn responsive coding methods in -- HTML5, CSS and JavaScript.
DIY with a responsive framework customized to your requirements with Sass, mixins and variables. See link below for details
https://getbootstrap.com/docs/4.0/getting-started/theming/
DIY with an online web solution that requires no coding skills (special hosting and other fees will apply).
Hire a developer.

Translate

Nancy O'Shea— Product User & Community Expert

BenPleysier

Community Expert

in the mobile version, the whole button needs to highlight on hover, not just the text.

By @TheOriginal150mph

There is no hover event on touch screens, including mobiles.

Translate

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

T

TheOriginal150mphAuthor

Inspiring

Ok thanks.

Just to confirm - the hover isn't the reason for my question. You'd have to look at the site and resize the window to see how its broken.

Translate

BenPleysier

Community Expert

My bad, apparently I did not read the whole question.

Personally I would have gone for a mobile first approach. Create a new style sheet and replace the link in the main document. What you will see is that the `intro-big-text` comes directly below the floated image. You will need to clear the image as well as the `mainNav`.

Then you are still stick with the last three menu items menu items that have cleared the floating image. These have moved too far to the left.

All I can suggest is

1. always develop with mobile first

2. learn CSS Grid, but at least Flexbox.

Translate

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.