I will work on the CSS this evening. Please do not change anything in the HTML until I get back with you. I would like you to be able to test the rewritten CSS in that same environment. OK, chief?
1 Like
Hi ronpat
I put the large stars back so that the html is as it was originally.
The bigger stars look better, IMO.
Before I turn this loose, please let me know if this smallest view will work for you.
Looks like magic!
How far down does it go:300px?
If not, the city could go with a query, but the State must stay. The letters ST are not needed as for non-US cities it looks better to just have empty space
many thanks
EDIT
There is just one small thing: the logos have gone quite small. They are the links and the most important part. This small it becomes difficult to read which chain it is, and as the column Chain has gone in a query…
Up in the page there is a mention to the City that was queried, say “Results for Oxford”, so strictly speaking the City is not needed when it gets to this size. I would prefer to lose the City and leave the larger logo.
Please see my Edit above
Also to give you an extreme enter “Hollywood Fort Lauderdale” in the Search box
~
One way to solve the logo problem is to use something like
table td:nth-child(1):hover {
transform: scale(1.x);
}
to expand them when you hover on them. otherwise take out City and use the room for the larger logo.
First, the screen shot above includes a ruler device which shows that the “screen” is 300px wide.
Next, this is a view that is about 450px wide. I didn’t measure it, but you can see the calipers still set to 300px. At this width, the hotel logos are full size. They will not get any larger. Presumably, a user could turn their smartphone sideways for the large view. Ignore the dotted lines.
This last view is 300px again with the addition of the Melia hotel and transform: scale(1.2); I’m hovering over the large icon. This last image looks sharper if you click on it to see the larger view.
Hi ronpat
Oops… I need new glasses. Sorry!
many thanks for your time and effort. It looks great and the little things like eliminating the “ST” I can do myself.
I guess I can always improve on the quality of the logos so that they are easily read under the
transform: scale(1.2
many thanks again
qim, the best thing you can do to improve the sharpness of the logo images is double their size and allow the browser to scale them down to fit the screen. These are very small images. You could quadruple the area (double the dimensions) with a clean conscience.
I want to go through the CSS again. I’ll post the code later this afternoon. It’s 3am now, so it will be after 3pm this afternoon. That will also give you time to think of any other considerations that you have that we might need to plan for.
Cheers.
the only adjustments I can think of, I can sort out myself (famous last words…)
Getting rid of th “ST” and getting everything text-align:left;
Look:
Good night!
Here ya go. Unpack the zip file and open the HTML file in your browser. The HTML and the CSS have been formatted to be human readable.
The CSS was 618 lines, it is now 454. Most of the compacting was from the removal of empty lines and a more than a few lines of table junk in the media queries. The resulting media queries had very little table code until I started trying to squeeze certain cells at narrow widths to allow more room for the logo images. I’m not excited about the pattern of the cell width declarations, but the results seem OK.
The only changes to the HTML are the deletion of serial break tags. They were replaced with margins or padding as needed.
You mentioned left-aligning the text. Good luck with that. I don’t recommend it. Definitely don’t left-align the checks and "X"s. Line 284 will left-align everything except stars and logos.
At 320px width, the logo images are only about 10-12 px narrower than native. When hovered, they actually become 2px wider than native.
I’m using the larger stars but limited their max width. They look nicer that way.
The zip file contains HTML, CSS, and images. Plug-n-Play… or make that Click and Play.
Cheers.
Search1a.zip (48.2 KB)
2 Likes
Hi, many thanks
it looks great!
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.