Help with portfolio image issues

So, I’m having trouble making my images fit on the page without having a horizontal slide bar. Does anyone have any recommendations for making the images smaller and fit on the page? How would I go about doing this?

you could either use bootstrap’s responsive grid classes to make them fit in a grid or use your own css rules like max-width to control image widths. that way you can make sure that your images are rendered within the screen boundaries.

Add this declaration to your CSS body rule.

overflow-x: hidden;

and try to set your image’s width in percentage. like,

width: 100%;

Hey Ben, you may want to put a margin on your p tag so it’s not butted against the left edge.

#gallery a p {
font-family: ‘Roboto’, sans-serif;
margin-left: 15px;
}

As for the image size issue, right now you’re just linking directly to the jpg image.

So what happens is the web browser will open a new tab/window and display this jpg image all by itself. The problem is this JPG file is really huge (3000 x 2000 pixels) and therefore, the browser cannot fit it in the view window, and thus it shows horizontal scrollbars.

What you need to do is link your tag to another html page. And then inside that html page, embed the image using tags and then you can use bootstrap class of class=“img img-responsive” to contain it within the browser window.

Of course, if you have 10 images, you’ll need to create 10 html pages… which is not efficient. Typically, one would just create a single html page (let’s call it viewer.html) and pass the image url as parameter. viewer.html?image=someimagefilename.jpg, and then inside your viewer.html get the string passed… and then embed that within your html code. That way, regardless if you have 5 or 500 images, you just need one viewer.html file.

2nd SOLUTION:
Use smaller images :slight_smile:

body {
margin: 0, auto;
}