Photographer web site using Osmosis
-
-
- xur82
- Rocketeer
- Posts: 86
- Thanks: 2
-
www.cian.photography
Not many overides on this one as I found it to be very suitable for my requirement.
Just a few picture galleries to add now over the coming weeks. -
The following users have thanked you: MrT
-
-
-
- Who?
- Preeminent Rocketeer
- Posts: 25562
- Thanks: 613
- Joomla freelancer
- Looks nice although I would try to create that pricing table with the same height on the columns and not like you have right now with each column with the different height
- Check my services at: Mihha-Vision
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
Very nice looking site - well done! and thanks for sharing...
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
You can change those pricing table heights with this...
ul.rt-table { min-height: 1055px; }
Although you probably will also want to put that in media queries so that you can set a different height for each viewport size.
/* Smartphones */ @media (max-width: 480px) { } /* Smartphones to Tablets */ @media (min-width: 481px) and (max-width: 767px) { } /* Tablets */ @media (min-width: 768px) and (max-width: 959px) { } /* Desktop */ @media (min-width: 960px) and (max-width: 1199px) { } /* Large Display */ @media (min-width: 1200px) { }
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- xur82
- Rocketeer
- Posts: 86
- Thanks: 2
-
Hi Mark,
thanks for your advice, I just tried that out. ul.rt-table {min-height: 1055px;}
Although it looks more neat as a layout inicially, I just found that when the window is sized smaller you have a huge gap of nothing, to the next price module.
This may be what you meant by adding the @media strings.. Although I can see they are width related.
It would actually be nice if that left border was there on each module, using the method I initially had. I'll have a look at that..
I've left it with your change so you can see what I mean, for the mo'
www.cian.photography/prices - Last Edit: 9 years 9 months ago by xur82.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
Yes put the CSS I gave you in each of the media queries and set a different value for each viewport size - that is what I meant. Setting just one value for every viewport size will mean that it looka huge in smaller viewports.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
Yes they do - you put them in your custom CSS file, and put the CSS I gave you inside each of the media queries and change the min-height value to a value appropriate to that viewport size.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
You've still got it wrong... you have put...
ul.rt-table { min-height: 900px; } @media (max-width: 480px) { } @media (min-width: 481px) and (max-width: 767px) { } @media (min-width: 768px) and (max-width: 959px) { } @media (min-width: 960px) and (max-width: 1199px) { } @media (min-width: 1200px) { }
When it should look like...
@media (max-width: 480px) { ul.rt-table { min-height: 900px; } } @media (min-width: 481px) and (max-width: 767px) { ul.rt-table { min-height: 900px; } } @media (min-width: 768px) and (max-width: 959px) { ul.rt-table { min-height: 900px; } } @media (min-width: 960px) and (max-width: 1199px) { ul.rt-table { min-height: 900px; } } @media (min-width: 1200px) { ul.rt-table { min-height: 900px; } }
And you should change the 900px to a different value for each viewport size (just resive you browser window and you'll see what we're getting at).
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.049 seconds