Docs

[Eric]

This reply has been marked as private.

[Rad]

Hi Eric,

Got it, but with screenshot 8, it’s not quite possible to fix the width while preventing it from overflowing. It’s like the entire layout is responsive and compressing, but the element within has fix dimension.

We can decrease the sidebar by percentage, and we can increase the content by percentage too. Hence, that will increase the content width but still responsive. If you like to do that, then we’ll have to re-do the CSS since we will be setting new breakpoints and sizes. Would you like to do that?

Or do you like your entire site’s desktop design to stay on fixed width? No resizing, no compressed, no expansion.

Thanks!

[Eric]

Hmm, would it be possible to try your first option and then if it doesn’t quite work, then I could try to make it fixed width? I assume the second option will dramatically change the website, but I’m willing to try both to get the desired effect.

So if you can let me know what the steps are and thanks again for your patience!

[Rad]

Hi there,

Those CSS are in effect, adding more CSS will complicate it. I can’t try it on my end since your setup is different from mine. How about clone your site and let’s try it there?

Thanks!

[Eric]

Okay good idea. But just to make sure I don’t screw anything up, how would you go about cloning my website? Should I use the duplicator plugin? Or is there an easier way? Let me know the easiest/safest cloning method and then once it’s done we can go from there.

Thanks!

[Joao]

Hi there,

Please install All in one migration plugin and export your whole site. Then import it into your new destination.

That process will preserve all content, but URLs/domain will be updated depending on where you imported it.

You also can use a paid service like Blogvault which is really good.

Hope this helps.

[Eric]

This reply has been marked as private.

[Lely]

Hello Eric,

Yes, we need another wordpress setup to import the backup file and that will be your staging site. Some hosting offers staging site. You may ask your hosting provider if it’s available.

Regarding the Iphone and Ipad issue, we can check if it can be done using CSS. But then can you clarify which screenshot 3 you’re referring to? This is so we can be specific in our suggestion to your blog single post page.

[Eric]

Yep sorry I should have specified.

Screenshot 3 (https://s3.amazonaws.com/community-themeco/app/uploads/2016/07/30205245/screenshot-3-sample.png) and screenshot 4 (https://s3.amazonaws.com/community-themeco/app/uploads/2016/07/30205246/screenshot-4-sample.png) shows how I’d like my blog posts to appear on the iPhone (mobile).

Then there’s screenshot 7 (https://s3.amazonaws.com/community-themeco/app/uploads/2016/07/30205426/screenshot-7-sample.png), which shows how I’d like my blog posts to appear on the iPad (tablet).

And just to show you the difference, currently on the iPhone my blog posts appear like this (https://s3.amazonaws.com/community-themeco/app/uploads/2016/07/30205244/screenshot-2-iPhone.png), which makes it very difficult to read as the page is very narrow. And on the iPad, it appears like this (https://s3.amazonaws.com/community-themeco/app/uploads/2016/07/30205426/screenshot-6-iPad-no-code.png), which isn’t bad, however if possible I’d like the sidebar to remain on the side, which is how it appears in the screenshot listed above.

If a solution to both those issues can be found using CSS, then I’ll certainly be able to make due with the aforementioned desktop issues.

Let me know!

[Lely]

Hello Eric,

For the mobile view, please add this custom CSS:

@media (max-width: 480px){
h1.entry-title {
    font-size: 160%;
}
.single-post .x-main.left {
    padding: 10px;
 }
}

For tablet, please add this custom CSS:

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) {
.single-post .x-main.left {
    float: left !important;
    display: inline-block !important;
    width: 72% !important;
    padding: 10px;
}
.single-post aside.x-sidebar.right {
    float: right;
    display: inline-block;
    width: 26% !important;
}
}

Hope this helps.

[Eric]

Hey thanks for the quick reply! The code for the mobile worked great, I was just wondering if it’s possible to create a bit of padding between the image and the text, which as you can see from screenshot 1 is very close together. If I were to add the spacing within the post itself, then the picture wouldn’t look good on the tablet and on the desktop, so I was just wondering if it’s possible to add some css that automatically creates spacing for mobile only. And if that’s not possible, is there something I can add directly into my posts that’ll create spaces that show up on mobile only?

Also unfortunately the code for the tablet didn’t work, as I saw no difference once it was added. Perhaps there was an issue within the code that blocked it from taking effect? Let me know and thank you again!

[Lely]

Hello Eric,

For the spaces, I can see that the image was added inside text element. What we can do is use GAP shortcode hidden on desktop. Add inside the text element right after the image element. Something like this:

[x_gap size="100px" class="cs-hide-xl cs-hide-lg cs-hide-md cs-hide-sm"]
Adjust the size accordingly. That 100px space is only visible on mobile.

Currently, I can’t see the CSS for tablet on your site.
Can you try updating it to this and add again:

@media (min-width: 768px) 
  and (max-width: 1024px) {
.single-post .x-main.left {
    float: left !important;
    display: inline-block !important;
    width: 72% !important;
    padding: 10px;
}
.single-post aside.x-sidebar.right {
    float: right;
    display: inline-block;
    width: 26% !important;
}
}

Hope this helps.

[Eric]

Hey unfortunately neither of them worked. I placed the gap shortcode after the image but instead of separating the image from the text on mobile only, all it did was create a gap between the headline and the image (see screenshot 1), which was also visible on the desktop and the tablet as well. Any reason as to why this didn’t work?

Also while we’re on the subject of that particular shortcode, could I add to it so that the image in question will become centered on mobile only?

And for the css, the code unfortunately had no effect on the tablet, so at this point I think I’ll just leave it the way it is. I made some modifications that made it look a bit better so for the sake of simplicity I’ll keep it as is! But thanks for trying.

Let me know about the shortcode and thanks again!

[Lely]

Hi Eric,

Just to check the issue, I have added the shortcode on this post:http://ghostswithtypewriters.com/first-attempt/. I found out it’s because of the default left align position on desktop. To fixed that, I have added the following CSS code on Settings Tab > Custom CSS:

@media (max-width: 480px) {
.x-text .alignleft {
    float: none;
    display: block;
    margin: 0 auto !important;
}
}

Above code will also center the image on mobile view. See attached screenshot. Feel free to move above CSS on Customizer’s for it to work on the entire site. I left it working on that post page.

You’re welcome!

Cheers!

[Eric]

Hey that CSS worked great! There’s just one small issue left to be resolved. Although the gap shortcode does create the desired effect on the mobile, for some reason on the tablet and on the desktop it’s also creating a gap between the image and the title (as you can see from screenshot 1, which without the shortcode, appears like screenshot 2).

So how can I have it apply only to the mobile? Once I get that everything will be perfect.

Thanks in advance!

[Author]

Posts