Penci fancy heading - align text in mobile

Nakita Fox replied

6 years ago

Customer Reply

That worked, thanks heaps!

PenciDesign replied

6 years ago

Staff Reply

Hi,

Please try replace the code I sent to this code:

@media only screen and (max-width: 768px){
.penci-fancy-heading.penci-heading-text-right .penci-heading-subtitle, 
.penci-fancy-heading.penci-heading-text-right .penci-heading-title, 
.penci-fancy-heading.penci-heading-text-right .penci-heading-content,
.penci-fancy-heading .penci-heading-subtitle, 
.penci-fancy-heading .penci-heading-content{ float: none !important; text-align: center; }
}

Best Regards,

PenciDesign

Nakita Fox replied

6 years ago

Customer Reply

Okay, that kind-of worked! The only problem is that when viewing from my phone (in chrome) the subtitle is not aligning to the center - but only for the sections that were originally right-aligned (Nakita Fox, workshops, private sessions). The content/description text is aligning to the center, though.

This isn't happening in the elementor responsive mode, though, everything is aligned to center as it should be. It's just on my phone that it's not aligned. I've included a screenshot from my phone.

PenciDesign replied

6 years ago

Staff Reply

Hi,

1/ Please try replace the code I sent to this code:

@media only screen and (max-width: 768px){
.penci-fancy-heading.penci-heading-text-right .penci-heading-subtitle, 
.penci-fancy-heading.penci-heading-text-right .penci-heading-title, 
.penci-fancy-heading.penci-heading-text-right .penci-heading-content,
.penci-fancy-heading .penci-heading-subtitle, 
.penci-fancy-heading .penci-heading-content{ float: none; text-align: center; }
}

Best Regards,

PenciDesign

Nakita Fox replied

6 years ago

Customer Reply

1. That CSS for the Fancy Heading isn't making any difference at all for me, I checked on both my desktop and mobile and there was no difference.

I am mainly using the fancy headings on this page: https://oscarfox.co/about/ ( Please note there are NSFW images on this page)

You can see that on desktop some of the fancy heading blocks are left aligned and some are right aligned. But on mobile, I want them to all be centered.

2. That worked great! That did make the post entry text align to the left though, so I added this CSS back in to align it to the center, is that the correct way to do it? I couldn't find the option to center the text elsewhere in customise.

.post-entry {text-align:center;}

3. Gotcha, thank you. I've fixed that. I was looking for a page, I didn't think to look for an image!

Thank you!

PenciDesign replied

6 years ago

Staff Reply

Hi,

1/ For Fancy Heading, please try add more this code to Customize > Custom CSS to do that:

@media only screen and (min-width: 1170px){
.penci-fancy-heading.penci-heading-text-center .penci-heading-content{ text-align: left; }
}

2/ This issue caused by you've using this custom CSS:

.post-entry {
    margin-left: 200px;
    margin-right: 200px;
    text-align: center;
}

Let's remove it and do following steps:

a) Go to Customize > Single Post Options > on "Single Posts Sidebar Layout" > select "No Sidebar with Container Width Smaller"

b) On "Custom Width for No Sidebar with Container Width Smaller Layout You've Selected Above" > fill "770"

3/ That come from an attachment inside your media:

https://oscarfox.co/blog/

Let's find this image and remove it.

Best Regards,

PenciDesign

PenciDesign replied

6 years ago

Staff Reply

Hi,

Please show me URL for this issue to I can take it a look on this.

Best Regards,

PenciDesign

Nakita Fox started the conversation

6 years ago

Conversation Start

Hi there,

For the penci fancy heading element, I'd like to align the text to center but only on mobile, is this possible?

Thank you!