• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Responsive code got broken

Contributor ,
May 31, 2021 May 31, 2021

Copy link to clipboard

Copied

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...

Views

622

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
community guidelines
Community Expert ,
May 31, 2021 May 31, 2021

Copy link to clipboard

Copied

quote

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.

Wappler, the only real Dreamweaver alternative.

Votes

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
community guidelines
Contributor ,
May 31, 2021 May 31, 2021

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
Community Expert ,
May 31, 2021 May 31, 2021

Copy link to clipboard

Copied

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`.

BenPleysier_0-1622530051283.png

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.

 

Wappler, the only real Dreamweaver alternative.

Votes

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
community guidelines
LEGEND ,
Jun 01, 2021 Jun 01, 2021

Copy link to clipboard

Copied

quote

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.


By @TheOriginal150mph

 

Well you have a lot wrong with your code.

 

One error is:

 

 

.main-nav ul li {
	margin: 0;
	padding: 0;
	display: inline;
/*	padding-left: 15px;*/
/*	text-transform: uppercase;*/
}

 

 

You dont have a target of .main-nav ul li

Your target IS the ul > li (so the ul is not required in the css selector) and your class name is also incorrect in the code below (its not mainNav its main-nav) as in your css selector.

 

 

<nav>
	  <ul class="mainNav">
		<li><a href="index.html">Home</a></li>
		<li><a href="#">Art Direction</a></li>
		<li><a href="#">Websites</a></li>
		<li><a href="#">Video/Animation</a></li>
		<li><a href="#">Illustration</a></li>
		<li><a href="#">Logos</a></li>
		<li><a href="#">Client List</a></li>
		<li><a href="_contact.html">Contact</a></li>
	  </ul>
	</nav>

 

 

 

Setting height on any container will lead to problems:

 

 

header {
	margin: 0 0 15px 0;
	padding: 1.7em 0 0 0;
/*	color: #000000;*/
	height: 120px; 	
}

 

 

That's just a couple of major issues. I cant help but think you are just stabbing in the dark at this which must be very frustrating. Unfortunately without knowing how to code you wont get very far.

Votes

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
community guidelines
Contributor ,
Jun 01, 2021 Jun 01, 2021

Copy link to clipboard

Copied

Test from iphone

Votes

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
community guidelines
Contributor ,
Jun 01, 2021 Jun 01, 2021

Copy link to clipboard

Copied

trying to troubleshoot posting issue w Adobe tech

Votes

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
community guidelines
LEGEND ,
Jun 02, 2021 Jun 02, 2021

Copy link to clipboard

Copied

I found that only text should be used in the response form field. IF you copy any part of a reponse from another post or try and paste any kind of html into the form field, without using the dedicated </> code button then you are likely to get a response of either 'post flooding detected' or 'validate your reponse'.

 

Granted this didn't used to happen as ferquently as it seems to be happening over the past few months.

Votes

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
community guidelines
Community Expert ,
Jun 01, 2021 Jun 01, 2021

Copy link to clipboard

Copied

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.

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Contributor ,
Jun 07, 2021 Jun 07, 2021

Copy link to clipboard

Copied

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.

 

 

Screen Shot 2021-06-07 at 11.35.18 AM.png

Votes

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
community guidelines
Community Expert ,
Jun 07, 2021 Jun 07, 2021

Copy link to clipboard

Copied

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.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
LEGEND ,
Jun 07, 2021 Jun 07, 2021

Copy link to clipboard

Copied

quote

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.

 


By @Nancy OShea

 

You don't need to use SASS to build with Bootstrap, that just 'pretends' it's more difficult than what it is. All you need is a good knowledge of the Bootstrap utility classes to build a responsive website, whilst not the best workflow in my opnion its the most commonly used by both amatuer and professional developers who use Bootstrap. Its something that most people, having no coding skills, would be able to do after a few hours going through the document, whereas bringing SASS into the equation would be more suited to the 'next level' Bootstrap developer and is not going to be understood by a rookie who doesnt know anything.

 

BUT I agree with you, whatever you choose, a framework or manual coding, you need to spend time learning/understanding how it works before you can expect to do anything useful with it, just stabbing around in the dark isn't going to work.

 

 

Votes

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
community guidelines
Community Expert ,
Jun 07, 2021 Jun 07, 2021

Copy link to clipboard

Copied

The OP doesn't like the weight of Bootstrap's minified scripts.  So I mentioned how to customize the package to one's particular requirements (i.e keep only what you need, discard the rest). 

 

Although not essential, customizing Bootstrap is an option for anyone who wants to delve deeper.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Contributor ,
Jun 07, 2021 Jun 07, 2021

Copy link to clipboard

Copied

Wasn't Dreamweavers WYSIWYG interface set up so that "learning to code" wasn't required? It's just that the web moved out of browsers and became much more complex. In the early Nineties, I actually enjoyed building one-off sites with Adobe Pagemill, back when frames and tables were cool lol. 

Votes

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
community guidelines
Community Expert ,
Jun 07, 2021 Jun 07, 2021

Copy link to clipboard

Copied

quote

Wasn't Dreamweavers WYSIWYG interface set up so that "learning to code" wasn't required?

=============

A myth perpetuated by the marketing dept.  Coding has always been essential.  Tools don't build great web apps, people do.  😉

 

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
LEGEND ,
Jun 07, 2021 Jun 07, 2021

Copy link to clipboard

Copied

quote

Wasn't Dreamweavers WYSIWYG interface set up so that "learning to code" wasn't required? It's just that the web moved out of browsers and became much more complex. In the early Nineties, I actually enjoyed building one-off sites with Adobe Pagemill, back when frames and tables were cool lol. 


By @TheOriginal150mph

 

I dont know anything that doesnt require some code manipulation, apart from maybe some cookie cutter templates where you get what you are given and shoe-horn in your own content.

Votes

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
community guidelines
LEGEND ,
Jun 08, 2021 Jun 08, 2021

Copy link to clipboard

Copied

LATEST

I have always rolled my eyes at Muse.

I still remember the first Adobe event where it was on the show flaw creating something and seeing about 50 divs all nested created for something small and laughing with some others. It got better but as you indicate a drag and drop based web sollution can only go so far and unlike the other posters comments they do not teach you code hey 🙂

Votes

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
community guidelines
Adobe Employee ,
Jun 02, 2021 Jun 02, 2021

Copy link to clipboard

Copied

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

Votes

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
community guidelines