HTML CSS help

dipanjan94

I wanted to customize this page https://www.dipanjanpal.com/NFTs/n-6QKBrV

I will briefly state what I am looking for.

1. I want the header image (SuperRare logo) to be added via html/css so that I can adjust its size on both phone and desktop.
2. For every NFT, I want a content block where the left half of it would be an image, and right half of it would be text. The image should always be in "fill width" mode so that the alignment looks perfect.
3. I want the images to stretch to the edges on the mobile screen
4. I want the buttons "View on SuperRare" or "View on Foundation" in middle alignment for mobile phone.

I know it can be achieved via html/css code but I am not good enough to write complex codes for this one, so I was looking for some help. If anyone can do one content block for me (Say for the image "Midnight Glory", that will be amazing!)

Thank you in advanced!

Hikin' Mike

No need to go with a HTML/CSS Block since your current page seems to work pretty good as it is. If you add this to a CSS Block on that page, #3 and #4 should work:

@media screen and (max-width: 736px) {

  .sm-user-ui .sm-page-widget.sm-page-widget-image .sm-page-widget-content  {
    margin: 0 !important;
  }

  .button {
    text-align: center;
  }

}

For #1, since the above code removes your "SuperRare Logo", I would just add some left/right padding (extra space in your logo) and be done with it. Your logo scales nicely as it is.

I have no idea what your talking about on #2.