17
Replies
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.
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.
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.
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.
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.
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. 😉
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.
AdChoices