Image centering problem

  • mikaelh

    (@mikaelh)


    4 years, 1 month ago

    Hey!

    I’ve got a cosmetic issue with spread pages. I’m not terribly advanced with CSS so I can’t seem to conjure up a solution for this.

    Single page comics show up just fine. They’re always a fixed width and pose no problems, as they center without issue and align with everything else. However, if you look at the linked page, you’ll notice that the spread pages are a little awkward to look at. They don’t center, and you have to scroll right to view them.

    I reckon the centering problem is because the comic image inherits its properties from the body. Is there any way to fix this?

    This is how the CSS for the #comic and #comic img look like.

    #comic img {
max-width: 2000px;
height: auto;
text-align: center;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
	border-bottom: solid 1px #000;
	border-top: solid 1px #000;
	border-left: solid 1px #000;
	border-right: solid 1px #000;
}

#comic {
display: block;
margin-left: auto;
margin-right: auto;
padding-left:45px;
padding-top: 0px;
text-align: center;
display: table-cell;
vertical-align: top;
width: 100%;	
}

    Cheers!

    • This topic was modified 4 years, 1 month ago by mikaelh.
    • This topic was modified 4 years, 1 month ago by mikaelh.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • MaxVaehling

    (@maxvaehling)

    3 years, 10 months ago

    It appears you theme’s page size is limited to 900px. That’s why the #comic area starts whereever that outer frame puts it. The extended max-width of your comic image then makes it overflow to the right.

    A simple fix would be to not limit the page itself like that but just the header and subcontent-wrapper area above and below the comic. That would allow you to also keep the default 100% max-width for the image – it would then just spread to the outer edge of the window and resize right on a mobile device.

    Of course, I have no idea what that’ll do to the rest of your site but the layout seemns simple enough, so it should work.

Viewing 1 replies (of 1 total)
  • The topic ‘Image centering problem’ is closed to new replies.