A Couple Little Issues

[HiroiSekai]

Hi David,

Thanks for looking into it for me. I think the parallax block is the only one that has that issue, at least from my own usage.

I tried the media query CSS and found it’s realistically just cropping the bottom half of my image away. I’m hoping to show the entire content of the image, even if I end up losing a lot of the height in the image. In short, I’d like the whole image to be visible, with no cropped sections, even if it is severely scaled down.

As for the parallax mobile, have you checked out the Stellar.js website on an iOS/mobile device? Their homepage shows it working very well.

Thanks as always,
Thomas

[David Martin – Support]

Hi,

This is certainly tricky to optimize for the best, we can look to add a min height to get more image in, previously the image height was relative to the width:

only screen and (max-width: 767px) {
.spb_parallax_asset.parallax-window-height {
    height: auto!important;
    min-height: 300px;
    background-attachment: fixed!important;
}
}

Thanks,
David.

[HiroiSekai]

Hi David,

I tried the CSS code and that one just seems to overbloat the background image to the point where you can’t see anything in the image on mobile.

Any news on the Stellar.js page on mobile, by the way? If the parallax effect could work on mobile then I think I wouldn’t need this other CSS media query anyways.

Thanks as always,
Thomas

[David Martin – Support]

Hi Thomas,

1) Could you screenshot that? I thought you wanted that? “In short, I’d like the whole image to be visible, with no cropped sections, even if it is severely scaled down.” – Let me know, I’ll see what I can do.

2) No plans to for this currently.

Cheers,
David.

[HiroiSekai]

Hey David,

Sorry for the really late reply. It’s been busy for me.

A perfect example of how I want the image to show up is how Cardinal formats an image on mobile when it is just inserted into the post through a text block. I have a few posts that don’t use the parallax and I screencapped one for you.

I would like to have the parallax images show up in the same way. Right now, they are just blown up within the container and difficult to see. Even if I lose a bunch of pixels in the height, I would like the parallax background images to show in their entirety side-to-side at 100% width, like in the attached image.

The attached image is from the mobile version, viewed on my iPhone. For contrast, the desktop post can be seen by visiting this link: http://hiroi-sekai.com/analysis-cafe-subete-ga-f-ni-naru-episode-3-and-playing-detective/

If there is a feasible fix, I would also like to request that the scaling issue can be fixed for tablets as well, as the bloating images aren’t as bad on iPad, but they are still being enlarged nonetheless.

Thanks as always,
Thomas

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

The CSS provided earlier is the solution for your iPhone, the will make the height relative to the screen width:

@media only screen and (max-width: 767px) {
.spb_parallax_asset.parallax-window-height {
    height: auto!important;
}
}

Anything else would distort the image.

Normal images use this same technique also.

Thanks,
David.

[HiroiSekai]

Hi David,

Thank you, this does seem to give the best results as you said, I’ll go with this code. That said, what media query would I use to target an iPad in portrait and landscape view?

Many thanks,
Thomas

[David Martin – Support]

Hi,

No problem.

You would need this: iPad in portrait & landscape

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { 

/* STYLES GO HERE */ 

}

Cheers.

[HiroiSekai]

Hi David,

Thanks for the media query code. I tried putting the same height:auto code into this and it just cuts the parallax area into a thin area about 40px height at most. Most of the content is not visible like this, I’m wondering if you know what’s happening there? You can probably replicate the effect by shrinking your browser’s width to iPad landscape size.

Thanks as always,
Thomas

[David Martin – Support]

Hi,

You could set a minimum height:

Without content or spacers, there no height for pad the space out.

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { 
.spb_parallax_asset.parallax-window-height {
    height: auto!important;
    min-height: 400px;
}
}

– David.

[HiroiSekai]

Hi David, that works out well as always. Many thanks.

I hate to have to bring up more stuff, but now I’m noticing strange things happening with only one layout: my iPad in landscape mode.

Stuff like full width banners are cropped, text that should only go to 80% width is going past the boundaries, and even my meta slider on the home page is cropped on the right side somehow. Shrinking a browser to iPad size does not replicate this issue, it only occurs when viewing it directly on the iPad.

Would like the issues shown in the attached screenshots fixed. Thank you as always!

Attachments:

You must be logged in to view attached files.

[HiroiSekai]

Sorry, forgot a couple small things. I have some CSS enlarging the first character in every post, but by making different rows in the Swift Builder, it seems to make the CSS work in more than one location. Here is a post where it is happening: http://hiroi-sekai.com/9-hours-9-persons-9-doors-the-review/

As you can probably see, the first letter in the post is enlarged and coloured, but if you scroll down the post, it happens on two other occasions as well, and I need to only affect the first letter. What CSS would I use for that?

Also, I have the Yoast SEO plugin and am trying to make all of my pages and posts SEO-friendly and ranked green on the plugin. However, the only issue is that on pages like our homepage and articles pages, everything is pulled directly from the Swift Page Builder blocks, so we can’t actually use any SEO keywords effectively. Do you have a suggestion for improving the Swift Builder SEO compatibility with Yoast? We had the thought of making a text block and setting it to display:none, but nowadays Google and other search engines don’t take that well at all. It would be much more damaging than beneficial.

Thanks as always.

[David Martin – Support]

What CSS are you using for enlarging the first character in every post? As that is your modification we cannot specifically assist you, you would need a front-end developer for something like that.

Regarding your YOAST SEO, Google will still crawl your page text regardless of the SPB.

– David.

[HiroiSekai]

Hi David,

I’m currently using:

.spb-asset-content p:first-of-type:first-letter {
font-size: 70px !important;
color: #FF0080 !important;
}

But I have tried many variants like first-child instead of first-of-type with the same results. I don’t think this is something at a front-end developer hiring requirement, it’s just one piece of CSS acting tricky with the way the Swift Builder is laid out somehow.

Good to know on the Yoast SEO, I’ll keep those few pages as is then.

Any word on all of those issues happening on my iPad? I detailed them in the reply before the enlarged letter/Yoast reply.

Thanks as always,
Thomas

[David Martin – Support]

Hi,

The issue with your CSS is that it will apply to all instances of spb-asset-content on a page.

You best bet is to simply add a custom class, ex: first-letter to the page builder assets you wish this to happen in and then modify your CSS to:

.first-letter .spb-asset-content p:first-of-type:first-letter {
font-size: 70px !important;
color: #FF0080 !important;
}

The odd cropping of images is likely related to your custom CSS changes. Try removing those one by one and seeing what effect that has.

– David.