Zero padding image for mobile

dipanjan94

Hello, I'm very new to Smugmug and I currently trying to make my website look nice in mobile. My website link is https://www.dipanjanpal.com/

I have the following two questions -

1. In my homepage, I want to make the very first image fill the width of mobile screen, like it's there in PC. I have chosen zero padding for right and left in pc, but Idk how to implement the same for mobile so that it shows from end to end without any white parts on either side.

2. If you scroll down on my homepage, you'll notice that after two pictures, I have a brief link about the sections About and Gallery, each one accompanied by a picture. In my mobile view, it shows first the two pictures, and then the two links. Ideally, I would want the About part under my picture and the Gallery part under the drone picture (bridge). How can I do this?

Any help would be appreciated, thank you very much!

Hikin' Mike

I hate to tell you this, but I see lots of white space on my desktop.

This will remove the margins on mobile. Add this to your theme's custom CSS section. There is a link in my signature if you don't know how.

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

That code is specific for that image block. If you change the block, this will not work.

That should get you started. I'll need more time to investigate #2.

Hikin' Mike

You'll need to remove those two Photo Blocks and both Text Blocks and use ONE HTML/CSS Block.

Add this to the HTML section:

<div class="container">

  <div class="image-wrap">

    <img itemprop="image" src="https://photos.smugmug.com/S249052af66102368d87f5d9/n-fdNbWR/i-rsvbNhX/0/f3e6c3c8/X3/i-rsvbNhX-X3.jpg" alt="" title="">

    <h2><a href="https://www.dipanjanpal.com/About" target="_self">About</a></h2>

    <p>Find out more about who I am and what keeps me motivated!</p>

    <p><a href="https://www.dipanjanpal.com/About" target="_self">Learn more →</a></p>

  </div>

  <div class="image-wrap">

    <img itemprop="image" src="https://photos.smugmug.com/HPSlideshow/i-DkG8swn/0/35266110/X3/DJI_0533-X3.jpg" alt="" title="">

    <h2><a href="https://www.dipanjanpal.com/Gallery" target="_self">Gallery</a></h2>

    <p>Take a quick tour in the Gallery to see some of my photos!</p>

    <p><a href="https://www.dipanjanpal.com/Gallery" target="_self">Learn more →</a></p>

  </div>

</div> 

Add this to the CSS section:

.container {  
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}

.image-wrap {
  margin: 0 auto 25px;
  text-align: center;
}

img,
.image-wrap {
  width: 500px;
  max-width: 100%;
}

h2 {text-transform: uppercase;}

I've tested this on my test page and it works. You may need to adjust text sizes for your liking, but that is an easy fix.

dipanjan94

Hey Mike, thank you so much for your help! For my first question, it is fixed. I love it!

In the second one, I love how it looks on mobile (I made a couple of tweaks). For wide laptop screens, it is showing a lot of white space. I want the gap between my image (About part) and the drone image (Gallery part) to be constant, like 50px or something for all laptop/big screens, without affecting the current mobile view. How can I achieve this?

Also, could you please help me create a similar HTML/CSS block for the "Purchase Prints" "Licensing Image" and "Contact and collaborate" part? I tried to copy your code and come up with something, it worked well on my laptop but looks very weird in my phone so I deleted it. Thank you so much in advance!

Hikin' Mike

@dipanjan94 said:
In the second one, I love how it looks on mobile (I made a couple of tweaks). For wide laptop screens, it is showing a lot of white space. I want the gap between my image (About part) and the drone image (Gallery part) to be constant, like 50px or something for all laptop/big screens, without affecting the current mobile view. How can I achieve this?

Find this:

.container {  
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}

Change the width: 100% to width: 1050px and add max-width: 100%;. Like this:

.container {  
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 1050px;
  max-width: 100%;
}

Here is why. You have two images with a width of 500px each. That would be 1000px total width. If you want 50px between the two images, make it width: 1050px. Adding max-width: 100%; allows it to switch to smaller devices when need be.

All work on your other question like I did before.

Hikin' Mike

Remove the three Text Blocks and add ONE HTML/CSS Block.

Add this to the HTML Section:

<div class="container">

  <div class="text-wrap">

    <h2>Purchase Prints</h2>

    <p>Wish to decorate your office or home with high-quality professional prints? Visit my <a href="https://www.dipanjanpal.com/Prints">printshop</a> and browse a selection of available images and I ship worldwide.</p>

    <p><a href="https://www.dipanjanpal.com/Prints" target="_self">Click here to visit my printshop →</a></p>

  </div>

  <div class="text-wrap">

    <h2>Liscensing Images</h2>

    <p>Do you want to use my images for your commercial project? Send me an email with the details of your desired use and we'll find the best solution.</p>

  </div>

  <div class="text-wrap">

    <h2>Contact & Collaborate</h2>

    <p>Do you want to collaborate with me and promote your products/business online? I offer a wide range of services including promotion via social media. Contact me for more info.</p>

  </div>

</div> 

Add this to the CSS Section:

.container {  
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 60px;
}

.text-wrap {
  width: 475px;
  text-align: center;
  margin: 20px auto;
}

h2 {text-transform: uppercase;}

The text will fill 100% width-wise, except for the 60px padding left/right in the container. So the text block will change depending on screen size, you have to use a fixed width. I picked 475px. I added 20px margins top/bottom so when the screen size gets smaller, you still have room, top/bottom. The auto margins left/right will allow it to center it.

dipanjan94

Thank you so much Mike! That was really, really helpful! I was able to make small changes to your code to make the final product look exactly like I wanted. I appreciate your help, thanks again!
Also, I think HTML is pretty cool, I love learning new things!

Hikin' Mike

@dipanjan94 said:
Thank you so much Mike! That was really, really helpful! I was able to make small changes to your code to make the final product look exactly like I wanted. I appreciate your help, thanks again!
Also, I think HTML is pretty cool, I love learning new things!

I expected you to make some small changes and I'm glad it worked and you learned something new. That's one of the things I like to do to is trying to learn new ways of doing things.

BTW, you have some nice images!