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 5 of 5
Like Tree2Likes
  • 1 Post By Ronald Roe
  • 1 Post By ipbr21054

Thread: Container advice for special needs user

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

    Container advice for special needs user

    Evening,
    I have been having a few teething problems with the look / layout of my site & asking for some help / advice please.

    This is the url The Attic Banwell

    Clicking the thumbnail then loads the larger version of the image.
    The below is what i would like to try and fix please.

    If you click the thumbnail top right you will see when loaded the following,on a pc.
    CHEST OF DRAWERS 150
    H 112cm W 115cm D50cm
    This is fine BUT when i check on a mobile i see the following,

    CHEST OF DRAWERS
    150
    H 112cm W 115cm D
    50cm

    I am confused as to why this text is not going its full width as opposed to word warping etc.

    My other issue i believe starts at main css line 1115
    I am experiencing images loads that obscure the before & next arrows < >
    Can we add a container which is centered and all images load inside this container so the < > are always outside & not obscured.

    I have learning disabilities so please make the reply simple.

    Many Thanks.

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    It's caused by your padding. See the attached image. You can see this yourself by right clicking the element and clicking "Inspect", which is usually the last option.

    You need a media query that checks for the portrait orientation. In that media query, change the padding to make the element wider.

    Desktop screenshot.jpg
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Member
    Join Date
    Mar 2016
    Location
    South west uk
    Posts
    81
    Member #
    53465
    Liked
    3 times
    Hi,
    The image supplied is so small i am unable to see it.
    I am no use with media query as per my other post.

    Could you advise please this query & where i need to insert it.

    Thanks very much.

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    You can put it at the end of the CSS file. It'll look like this:
    Code:
    @media (orientation: portrait){
      #viewer .slide .caption{
        /* New padding styles here */
      }
    }
    sarahswansea 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
    I have now added the supplied code and added some padding values.
    Thanks
    Ronald Roe likes this.


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 10:35 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com