Formatting and Spacing looks ugly on smallish screens

naomimaya

I'm redoing my site (changing from fixed to stretchy theme) but I don't like how the paragraphs look long and narrow for small screens/tablets (seems like anything between about 800 and 1280px wide for example, looks bad. Can anyone help me change this?

Page I'm working on: www. naomimaya.com/Espa%C3%B1ol

For example, the two paragraphs which start "meet Naomi" and "my philosophy" have spacers on the side in order to center the content, but I don't want those spacers there on screens smaller than 1280px. I want it full frame.

I also don't like the spacers above and below the paragraphs on mobile sites. (for example, the space above "meet naomi" and above "family portrait photography" have too much space above them on mobile.

Thanks,
Naomi

Hikin' Mike

Your link doesn't work.

naomimaya

Yes, i know... I was not "allowed" to post a link because apparently I'm too new to the forum!

The weird bit is a Spanish N... which got automatically changed too. Try this: naomimaya.com/Español

denisegoldberg

@naomimaya said:
The weird bit is a Spanish N... which got automatically changed too. Try this: naomimaya.com/Español

That link doesn't work for me either.

@Hikin' Mike it appears that you can access that page from a link in the navbar at the bottom of the page.

naomimaya

That's weird. I don't know why it wouldn't work if you go there directly. (Yes, it is accessible from the link on the bottom menu too)

I'm actually attempting to redo my homepage, but I wanted to keep it "invisible" until I've got it right, then I'll move it. No one ever goes to the spanish page!

Thanks!

Hikin' Mike

Okay, I see it now. One of the drawbacks (IMO) in using block spacers is what you are seeing. An "easy" way is to use a single HTML/CSS block. I would first remove (delete) all of the blocks in that section, to include spacer blocks and your images/content. Then add ONE 'HTML/CSS' block and add this:

HTML:

<div class="about-me">

    <div class="outer-wrap one">

        <div class="image-wrap">
            <img itemprop="image" src="https://photos.smugmug.com/Other/My-images/n-6hFrn/i-pHfcSRz/0/5c8e5820/M/i-pHfcSRz-M.jpg"   alt="" title="">
        </div>

        <div class="inner-wrap">
            <h2>Meet Naomi:</h2>
            <p>I am a wife, mother, photographer and traveler. I get especially excited when my photography takes me traveling and vice versa, when I get to photograph people during their travels! I love photographing weddings because of the challenge to capture the moment before it's gone.</p>
            <p>I travel between Spain and Canada every year... spending 9 months in San Pedro de Alcantara, (a few minutes away from Marbella), on the Costa del Sol and the summer months in and around Vancouver, Victoria and the Fraser Valley, BC. </p>
            <p>I would be happy to photograph almost anything you need, but I am most known for my wedding photography and natural family portrait sessions.</p>
            <p><a href="/About">Read more...</a></p>
        </div>

    </div>

    <div class="outer-wrap two">

        <div class="image-wrap">
            <img src="https://photos.smugmug.com/TravelDocumentary/Canada/i-7jzv4vp/8/fb41b961/S/van-6632-Edit-S.jpg" alt="Vancouver Hustle" title="">
            <img src="/img/spacer.gif" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
        </div>

        <div class="inner-wrap">
            <h2>My Philosophy</h2>
            <p>I have loved photography since high school when I learned to develop my own prints in the darkroom. But now, over 20 years later, my vision has become clearer. </p>
            <h3>&#8220;A painter adds; a photographer subtracts...&#8221;</h3>
            <p>Let me explain. A painter starts with a blank canvas and must keep adding to it until the piece is finished. But, a photographer starts with everything that is visible to the naked eye, and must subtract from it until there is meaning in what is left. After all, it is easy to fill up a photograph... just click the shutter and you will see. It is much harder to simplify one.</p>
            <p>I am reminded by this philosophy whenever I shoot.</p>
            <p>I strive to go for the pure, simple essence of the moment and nothing more.... The authentic moment, not artificially enhanced with Photoshop or filters... after all, it's those kind of &#8220;trendy&#8221; images that will look dated in a very short time!</p>
        </div>

    </div>

</div>

CSS:

.about-me {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.about-me h2,
.about-me h3 {margin-bottom: 1.5rem;}

.outer-wrap {
    display: flex;
    margin: 1.5rem auto;
}

.one .image-wrap {
    order: 1;
    margin: 0 0 0 1.5rem;
}

.two .image-wrap {
    margin: 0 1.5rem 0 0;
}

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

    .outer-wrap {display: block;}
    .image-wrap {display:flex; justify-content: center;}

}

Also, you were using two <h1> (titles) on that page. It's best to use one main title (Fine Art Photographer of People and Places) and use <h2>, <h3> etc.

When your screen reduces to 800px or smaller, you images become centered above your content.

naomimaya

Thanks Mike! The paragraphs are behaving how I want them to now! ;)

Only one other thing... those two images don't seem to size down for mobile anymore. Is that an easy thing to change? It's not a huge deal but the images seem to be causing side-to-side scrolling on my phone.

Thanks a lot!

Hikin' Mike

@naomimaya said:
Thanks Mike! The paragraphs are behaving how I want them to now!



Only one other thing... those two images don't seem to size down for mobile anymore. Is that an easy thing to change? It's not a huge deal but the images seem to be causing side-to-side scrolling on my phone.



Thanks a lot!

Sorry about that. Forgot to add this:

.image-wrap img {
    max-width:100%;
    width:auto;
}

naomimaya

Thank you! I hate to be a pain, but it only resizes the width now. If the screen is very small it distorts the images. I think it keeps the height constant? I tried adding "height: auto" but that didn't work.

Hikin' Mike

@naomimaya said:
Thank you! I hate to be a pain, but it only resizes the width now. If the screen is very small it distorts the images. I think it keeps the height constant? I tried adding "height: auto" but that didn't work.

Sorry, I'm not seeing any issues. I don't own a mobile, but I use something like this: http://quirktools.com/screenfly/#u=https://www.naomimaya.com/Espa%C3%B1ol&w=414&h=736&a=37&s=1

naomimaya

Thanks for the testing link. It looks good there, only on the screens size 320 and smaller (apple iphone 5 and above on that list) it looks distorted. I guess it's not a big deal, as those are probably the older phones.

Hikin' Mike

You can try adding this to it, but it's tough to troubleshoot something that I'm not seeing.

.image-wrap {
  box-sizing: border-box;
  }

Hikin' Mike

I just checked it on Chrome (I use Firefox) and I can see it. Let me see if I can fix it.

Hikin' Mike

Try this instead.

.about-me {
  box-sizing: border-box;
}

.about-me h2,
.about-me h3 {margin-bottom: 1.5rem;}

.outer-wrap {
  display: flex;
  margin: 1.5rem auto;
}

.image-wrap {
  max-width: 100%;
  width: auto;
}

  .one .image-wrap {
    order: 1;
    margin: 0 0 0 1.5rem;
  }

  .two .image-wrap {
    margin: 0 1.5rem 0 0;
  }

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

  .outer-wrap { display: block;}

  .inner-wrap {margin: 0 1.5rem;}

  .one .image-wrap,
  .two .image-wrap { 
    justify-content: center;
    display: flex;
    margin: 0 auto;
  }

}  

naomimaya

Thanks for your continued help, Mike.

Unfortunately, this isn't resizing down either. I've tried a bunch of minor changes too, just googling css stuff, but nothing worked.

I also noticed that the links on the page aren't working, and the text can't be copied or highlighted... which is weird because the whole page is like that, not just this html block. Could it be that the html/css is incompatible with another tutorial I used on this page? I implemented this: https://portal.photom.me/portal/add-full-width-image-to-your-smugmug-site-with-text-andor-button-over-it/ on that page which worked by itself, but not now.

Stumped.

Hikin' Mike

What images are not resizing? I need a screen shot as I'm not seeing any issues with the resizing.

Hikin' Mike

@naomimaya said:
I also noticed that the links on the page aren't working, and the text can't be copied or highlighted... which is weird because the whole page is like that, not just this html block.

In your HTML section, remove this line:
<img src="/img/spacer.gif" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">

naomimaya

Thanks again! That fixed my link issues.

I'm just stuck on the resizing of those two images still.... I am checking the screen sizing on here http://quirktools.com/screenfly/#u=https://www.naomimaya.com/Espa%C3%B1ol&w=240&h=320&a=31&s=1 for example, the first six options on the mobile drop down menu show the issue. It's most extreme on the smallest screens.

Thanks!

naomimaya

here's the screenshot

Hikin' Mike

I have found out that those try to replicate mobiles, but sometimes they don't do so good. This is one of those cases. My default browser is Firefox (Win 7) and it works fine. Using IE11, I can see it. Quit possible the real device is fine.

I really doubt people are using those small devices these days.