PDA

View Full Version : Resolved Alignment needs checking.



theremotedr
05-14-2015, 10:56 AM
Please could you check my code and advise.

The alignment issue is regarding the headings.
Looking on the iphone i see these are all in vertical alignment Contact Me to Keys & Remotes
The problem is Programming & Others.
These are to the left and not in alignment with the above.
Cant see where the faults is.

http://www.theremotedoctor.co.uk/1.html

Thanks

Beverleyh
05-14-2015, 01:11 PM
Using the developer toolbar will help you tremendously when troubleshooting layout issues like these. That's F12 for most browsers. Through the toolbar you will see that the pertinent styles applied to .new and .side, but not .right, are;


max-width: 50%;
padding: 2em;

So you should apply this CSS to .right also (inside the same media query breakpoint as the others). However, in case this .right class is used elsewhere on your site, you would be better off putting a new class in the markup and applying the CSS to the new class only.

theremotedr
05-14-2015, 01:45 PM
Hi
Thanks for the advice.
I have now done it.
This code was copied from the internet and edits made to suit.
Looking at the source code i pretty much see nothing out of place.

When i make edits in dreamweaver a large section of the code line 7 starts <style>@font-face followed by millions of letters.

Is this normal or can it be removed somehow ?

Beverleyh
05-14-2015, 02:40 PM
That's a hardcoded Data URI for a custom font (see font-family:'rs' in the source code). We can inline data coded fonts (and images/icons) to cut down HTTP requests and roundtrips to the server, which in turn helps with load speed and traffic bottlenecks (since browsers can only download so many resources in parallel). The downside is all that code. Another downside - especially with fonts - is that there can be a lot of superfluous data if not all the characters are used.

If you don't want to use the font, you can remove it, and then change the font-stack referenced elsewhere in the CSS from 'rs',sans-serif;, to one of these: http://www.cssfontstack.com/
A font-stack is a string of similar looking fonts that may or may not be installed on a viewing device. The chain of potentially available fonts offers a fallback for when preceding fonts are unavailable. When they are, the user sees the prettiest typeface, and when they aren't, the next available font comes in to play.

theremotedr
05-14-2015, 03:47 PM
I think that i have deleted that code that was not required.
I have used the Arial, Helvetica Neue, Helvetica, sans-serif stack font.

Added css file called sitemap.css

Dont see any change on the page in question.
Newbie trying to learn by his mistakes.....

mlegg
05-14-2015, 05:43 PM
the sitemap extension ending is .xml not .css

unless you are using sitemap.css for something other than a real sitemap (https://www.xml-sitemaps.com/)

The Sitemaps protocol allows a webmaster to inform search engines about URLs on a website that are available for crawling. A Sitemap is an XML file that lists the URLs for a site. It allows webmasters to include additional information about each URL: when it was last updated, how often it changes, and how important it is in relation to other URLs in the site. This allows search engines to crawl the site more intelligently. Sitemaps are a URL inclusion protocol and complement robots.txt (http://en.wikipedia.org/wiki/Robots.txt), a URL exclusion protocol.

theremotedr
05-14-2015, 05:54 PM
The css file is sitemap.css

This is a sitemap for customers to browse my site NOT for crawlers.
I also have the xml file for google/bing crawlers etc but this is a different file.

theremotedr
05-14-2015, 07:56 PM
Do i understand this incorrectly ?
Editing the css makes no difference when i refresh the page.

Cant see the error which is causing the no effect on the page.