Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
Like Tree3Likes
  • 1 Post By Ronald Roe
  • 1 Post By Ronald Roe
  • 1 Post By Ronald Roe

Thread: Advice before i tackle my next goal

  1. #1
    Member
    Join Date
    Mar 2016
    Location
    South west uk
    Posts
    81
    Member #
    53465
    Liked
    3 times

    Advice before i tackle my next goal

    Morning all,

    Here is the page in question The Attic Banwell

    At the bottom of the page is a grey border space.
    I would like to section up this space into 3 parts where the text section would be larger than the two equal sections where the image will be inserted.

    This would only be shown on the pc & not mobiles etc.
    Could you advise how i can add the correct code to allow me to achieve this please.

    See my example.

    footer.jpg

    May Thanks & have a nice day.

  2.  

  3. #2
    Member Matt @ BSH's Avatar
    Join Date
    Jan 2018
    Location
    Liverpool, UK
    Posts
    60
    Member #
    58134
    Liked
    5 times
    Can you draw a sketch of what you're trying to achieve? I can't seem to understand what you mean from your post sorry.

  4. #3
    Junior Member
    Join Date
    Jan 2018
    Posts
    1
    Member #
    58190
    Hi,
    I was unable to log in and even having new password sent to me i was still unable to log in.
    I had to start a new account.

    When you go here as an example The Attic Banwell you will see at the bottom of the page the following,
    WELCOME TO THE ATTIC with STOCK ADDED REGULARY below it.

    I wish to make use of the space either side of it with an image etc.

    So the grey space at the bottom could be divided into 3 parts.
    The outer sections where the images would be placed say 25% of the width & the middle section where the text would be placed say 50%.

    The 25% / 50% values i could play with but trying to even get the space divided up was a total mash up.
    With me on this now ?

    IMG_18-01-16_E38E1713-A454-418D-9A1B-A65B3C7604B9.jpg

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Just float them left and set the width %.
    ipbr21054 likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  6. #5
    Member
    Join Date
    Mar 2016
    Location
    South west uk
    Posts
    81
    Member #
    53465
    Liked
    3 times
    Hi,
    Ive only just got reply and since this post ive added an image work works well.

    I am back now for some advice with regards the media query side of thins.
    On phones etc in portrait the image is shown but squashed so i dont wish it to be shown on phones in portrait mode BUT just a color.
    Landscape seems to look fine.

    So basically i need to target these phone but not sure if the below is correct,especially the size & where i need to enter it.

    I have the following,
    Code:
    @media only screen and (max-device-width : 1024px) and (orientation : portrait) {
          background-color:#A8A9A6;
    In my main css the background image is located at Line 1143

  7. #6
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    You'll have to set background-image to none in the media query as well.

    It wouldn't get squashed, though if you just change the background-size to cover or contain. Cover will crop the edges if the container is not the same proportion. Contain will resize the image within the element, even if it's a different proportion.
    ipbr21054 likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  8. #7
    Member
    Join Date
    Mar 2016
    Location
    South west uk
    Posts
    81
    Member #
    53465
    Liked
    3 times
    Hi,
    Thanks for the reply,i have learning disabilities & sometimes cant understand the answer without some kind of guidance of line etc to complete it.

    Thanks& please advise if you would be so kind.

  9. #8
    Member
    Join Date
    Mar 2016
    Location
    South west uk
    Posts
    81
    Member #
    53465
    Liked
    3 times
    Hi,
    Please can you check my main css file,at the bottom i have added the supplied code.

    I am looking to target mobile phone NOT to show the background image in portrait mode.
    I am not sure what number to enter.
    If you could advise please,


    Code:
             @media only screen and (max-width: 812px) and (orientation : portrait) {
    		   
                #viewer .slide .caption {
                      background-image: none;
    				  }
    
    }

  10. #9
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Don't use a number at all. Just do like so:

    Code:
    @media (orientation: portrait){
      #viewer .slide .caption {
        background-image: none;
      }
    }
    ipbr21054 likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  11. #10
    Member
    Join Date
    Mar 2016
    Location
    South west uk
    Posts
    81
    Member #
    53465
    Liked
    3 times
    Hi,
    I have now changed it to what you have advised.

    So basically no matter what item is used to view this site in portrait the logo will not be shown.
    Would that be correct.

    Thanks.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:09 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com