0
Welcome Guest! Login
0 items Join Now

Photographer web site using Osmosis

    • xur82's Avatar
    • xur82
    • Rocketeer
    • Posts: 86
    • Thanks: 2

    Photographer web site using Osmosis

    Posted 10 years 5 months ago
    • 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?'s Avatar
    • Who?
    • Preeminent Rocketeer
    • Posts: 25562
    • Thanks: 613
    • Joomla freelancer

    Re: Photographer web site using Osmosis

    Posted 10 years 5 months ago
    • 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's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13483
    • Web Designer/Developer

    Re: Photographer web site using Osmosis

    Posted 10 years 5 months ago
    • 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's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13483
    • Web Designer/Developer

    Re: Photographer web site using Osmosis

    Posted 10 years 5 months ago
    • 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's Avatar
    • xur82
    • Rocketeer
    • Posts: 86
    • Thanks: 2

    Re: Photographer web site using Osmosis

    Posted 10 years 5 months ago
    • 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: 10 years 5 months ago by xur82.
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13483
    • Web Designer/Developer

    Re: Photographer web site using Osmosis

    Posted 10 years 5 months ago
    • 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.
    • xur82's Avatar
    • xur82
    • Rocketeer
    • Posts: 86
    • Thanks: 2

    Re: Photographer web site using Osmosis

    Posted 10 years 5 months ago
    • These @media

      They don't go in my custom css do they?

      Where exactly do these overides live?

      Cheeres
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13483
    • Web Designer/Developer

    Re: Photographer web site using Osmosis

    Posted 10 years 5 months ago
    • 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.
    • xur82's Avatar
    • xur82
    • Rocketeer
    • Posts: 86
    • Thanks: 2

    Re: Photographer web site using Osmosis

    Posted 10 years 5 months ago
    • Thank you
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13483
    • Web Designer/Developer

    Re: Photographer web site using Osmosis

    Posted 10 years 5 months ago
    • 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