Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

MG1878

Privileged
  • Joined

  • Last visited

Everything posted by MG1878

  1. Other than using Wix 🤮, I must admit I was surprised to see that your website is not responsive, despite the fact that you offer this service yourself - " We create responsive websites customised to your business..."
  2. I agree, the grey (whilst looking ad-like) is less obtrusive than the orange version. That wouldn't be hard though. But, that being said, I understand your particular concerns, Grant. I do not believe it needs jazzing up as it is a reference for anyone looking to find something once on the site - but that is not your primary content (which you want the visitor to look at) on the page. If you wanted to add some colour, why not highlight your headings such as "COMPUTERS" and "WINDOWS" in the orange that you have used?
  3. Wow! As much as I resent it, you need something like WordPress. Plenty of tutorials online I am extremely confident of that fact.
  4. The fact your manager is concerned about that browser is enough of a concern, really. It created uproar in my day job where a release of an ordering system went out and many users couldn't see a fairly fundamental function (a date picker) due to the fact their company pretty much states that they must use IE8. It has been redeveloped now in such a way that users of IE8 and even IE7 can view the date picker. I think it is just interesting to actually understand how many people still use those versions of that browser.
  5. Your <header> element is set to 100% width and when scaled down in terms of screen size, that element is still 100% wide. It is the elements contained within that need the attention - your logo and navigation here. You can see the navigation breaks onto a second line (on a smaller screen). You have set your <header> element to be 129px high, remove this, this is not neccesary. You can tweak the code to get the desired height by adding some padding to the top and bottom of this element Now, the way (when viewed on smaller screens) the navigation seems to float on top of your logo is due to the fact that on the <ul> element, you have set the position: absolute, maybe change this to position: relative so that it sits right in relation to that element. Let us know how you get on.
  6. Unless I am missing something really obvious, you have no media queries other than the standard setup. Nothing for screens 480px down etc? Have you looked into anything like this?
  7. Answer to the question set out in the thread title? Consider yourself very fortunate That is a top domain name considering these big companies/dealers who snap them up whilst still in the virtual womb. Bravo!
  8. The above is a very good shout (let us know the outcome), also, you have some code that isn't correctly nested/closed. <td height="106"><a name="home" /><h1>HOTELIERS SHOUT OUT!</h1></td> If "HOTELIERS SHOUT OUT!" is to the link for the <a> tag named "home" then you need to remove the "/" from "<a name="home" />" and add a "</a>" after "HOTELIERS SHOUT OUT" so it would appear: <td height="106"><a name="home"><h1>HOTELIERS SHOUT OUT!</h1></a></td> Viewing the Page Source typically would highlight these small errors. And yeah, as BlueDreamer alluded to, what is your reason for NOT wanting to use semantic markup? Just intrigued to gain some insights as to your opinion on this.
  9. I like the design. Something I would do is to add some kind of hover change state such as a darker shade of the colour etc, just so someone knows that by clicking what they are hovering over, then that will take them somewhere. I guess there is the pointer finger but not everyone would put 2 and 2 together. Just something small in my opinion. I don't like the generic footer, looks too similar to so many other sites out there. I would remove the Wordpress text from your <title> tags on the Blog page, though it's up to you. <title> Blog :: Pixel Coder :: Just another WordPress site</title> I am maybe beginning to sound like a broken record but the fact that it is designed in Wordpress is a -1 from me but hey, that's just my opinion, again!
  10. I had tried using the Firefox Web Developer Toolbar to 'Edit the CSS' but as it is in your actual .html page and not the .css file (unless I am missing something), it won't allow me to make the changes in real time to know for sure.
  11. It is (I believe) due to the padding you have added to the actual element .cols-content-td. Maybe try either adding padding-left or margin-left to the <h3> and <p> tags and see how that goes?
  12. A link to your site? Or some code to inspect? (Assuming it's not mpl.gg, which doesn't appear to be responsive at all).
  13. In my opinion - the orange gap between the "New Business Deals" and your footer (I assume) looks too wide. Apart from that, it looks OK. Flat design does make you feel like you have done half the job but think of the time spent by designers adding drop-shadows, rounded corner, gradients etc.
  14. I have never heard of Inkscape but it could prove to be very useful indeed. Thanks for the tip
  15. Very nice website indeed. Bravo!
  16. Glad to have been of help. Good luck with the rest!
  17. You seem to have two sets of values concerning that images dimensions width="85%" height="536" #home img {display: block;height: auto!important;width:100% !important;} Maybe remove the dimensions in the html itself? Add a class in your CSS such as .swg { height: auto; width: 100%; } and then in your html (in the line with the <img>) add the class="swg" - as below <h1><img src="images/1896905_10203002220633499_921453481_n.jpg" class="swg" alt=""/><a href="index.html" id="brand" title="Elibar Handknits & Baby Wear">Elibar Handknits & Baby Wear</a></h1> Hopefully that helps.
  18. Hi Firstly, "it's never too late", more so at 26, you're still a baby Secondly, you can purchase Photoshop and Dreamweaver but I tend to find GIMP as a good, free alternative to Photoshop. Dreamweaver, nah, use Notepad++ - or similar. Thirdly, simply use Google, there are a wealth of websites out there. Smashing Magazine, W3 Schools etc, there are far to many to mention. Finally, welcome back to the world of website design!!
  19. You seem to have answered the question yourself. The padding is widening your element meaning they no longer sit by side. If you are nesting columns, have you tried adding .alpha to your left column and .omega to your right column?
  20. Where is the website? You have told us your problem, but nothing of use that we can use to help you.
  21. It looks much better, Amy Typically, 'back to the top' links are positioned at the bottom right of the page so maybe put something there if you wish to have scrolling effect?
  22. I can see from your source code that it is your own work - that is the first thing I check, personally. Flashy looking websites are good but if the majority of it has been built using pre-built templates etc then -1 from me. Have you ever seen a website built in Wordpress and checked the source code? Crammed full of loads and loads of code (vomit inducing). Portfolio websites are to reflect you and your personality - if your current design does that then don't change it for anyone. If your client asked for a pink and yellow website then you would do it, as it is their website and their choice. Same with your portfolio. My site is blue and kind of boring (compared to yours) - but that is me in a nutshell. Blue for the team I support, not my depressive tendencies
  23. Set your containing container (or whatever you name it) to a width of 900px. Nice and simple Ensure child elements have the relevant widths and account for padding, which can widen the element.

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.