Skip to main content
G
graphicedge
Known Participant
February 19, 2017
Answered

Responsive in one direction

  • February 19, 2017
  • 3 replies
  • 382 views

I have set up a responsive site using Dreamweaver 2017 and the only glitch I seem to have is with the responsive images.

My images are a little over 800px wide.  I place them into a column at a browser width of 1240px.  Everything looks good.

When i make the width smaller everything looks good.  But when I make the screen say 1600px wide the photos do not get any larger causing the entire two column layout to stay to the right with more space being added to the right hand side of the photo column.

I thought responsive meant that it would scale larger and smaller to fit the column.  Am I wrong and if I am wrong what's the fix?

This topic has been closed for replies.
Correct answer osgood_

graphicedge  wrote

I have set up a responsive site using Dreamweaver 2017 and the only glitch I seem to have is with the responsive images.

My images are a little over 800px wide.  I place them into a column at a browser width of 1240px.  Everything looks good.

When i make the width smaller everything looks good.  But when I make the screen say 1600px wide the photos do not get any larger causing the entire two column layout to stay to the right with more space being added to the right hand side of the photo column.

I thought responsive meant that it would scale larger and smaller to fit the column.  Am I wrong and if I am wrong what's the fix?

Your image is not wide enough then. An image won't grow any wider that its original width unless you set it to do so. If you let an image grow from 800px to 1600px and beyond you will most likely see some deterioration, so you need to make images wide enough so they dont do that.

3 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
February 19, 2017

You might want to center your images with the center-block class.   With smaller images on wide screens, it adds a bit of symmetry.

<img class="img-responsive center-block" src="http://lorempixel.com/900/600/people/5" alt="...">

Nancy O'Shea— Product User & Community Expert
Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
February 19, 2017

You need bigger images for the largest target device.

You may find you need more than one set of image sizes to meet various device requirements (size and bandwidth). See Osgood's discussion on SRCSET.

OT: Srcset

Nancy

Nancy O'Shea— Product User & Community Expert
O
osgood_Correct answer
Legend
February 19, 2017

graphicedge  wrote

I have set up a responsive site using Dreamweaver 2017 and the only glitch I seem to have is with the responsive images.

My images are a little over 800px wide.  I place them into a column at a browser width of 1240px.  Everything looks good.

When i make the width smaller everything looks good.  But when I make the screen say 1600px wide the photos do not get any larger causing the entire two column layout to stay to the right with more space being added to the right hand side of the photo column.

I thought responsive meant that it would scale larger and smaller to fit the column.  Am I wrong and if I am wrong what's the fix?

Your image is not wide enough then. An image won't grow any wider that its original width unless you set it to do so. If you let an image grow from 800px to 1600px and beyond you will most likely see some deterioration, so you need to make images wide enough so they dont do that.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices