Mobile background and event page

Support
#1

Hello,

My background will not fit well on mobile, see attached image. I want the mobile picture different than the desktop background, that’s why I have 2 duplicate sections.

  1. How can I make it fit better on mobile? I have scaled it but nothing works :frowning:

  2. How can I have a headline for my event page?

  3. How can I enable sharing of posts on the event page, not just by having to click on each blog post…

  4. Also when you share the blog post, it shows my logo on facebook when shared, not the photo associated with the blog post

  5. Last, can you check that my desktop image looks ok on desktops. I think it is fine but someone told me on here it isn’t fine… Thanks!

www.theglassslipperllc.com

#2

Hello There,

Thanks for writing in!

1.) With Background image you can hardly achieve a total responsiveness without compromises. I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

2.) The headline is there but hidden because of your settings. To display it, you will need to add the following code in the custom css section in the customizer:

body.blog.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 145px;
}

.blog .x-landmark-breadcrumbs-wrap,
.archive .x-landmark-breadcrumbs-wrap {
    display: block;
}

The title should be change in the customizer also. Please go to Appearance > Customize > Renew > Blog Options and change it to “The Events”: http://prntscr.com/fxz9i4

3.) This could be a limitation of the sharing plugin that you are using. I believed that there must be a setting somewhere where it will display on archive pages such as the events page.

4.) Since you have installed Yoast SEO plugin, you will need to disable Open Graph in the customizer. Please go to Appearance > Customize > Social > open Graph

5.) The image seems fine to my end. This is how I see your site: http://prntscr.com/fxz5eo

Hope this helps. Kindly let us know.

#3

  1. That is all good information however, I am not sure how to code that myself to make my image look like the attached image for mobile. Can you give me specific directions or steps please

  2. That worked. However now the blog headline is smaller than the other pages headline and it is not centered. Also, there is a gap from the logo to the actual headline how can I reduce that gap?

  3. I unchecked posts, but still it is not showing an option to share on my event blog page

4.Open graph was already turned on… So I am not sure it I was supposed to turn that off? Again I am trying to get the photos from the blog posts to show when shared not my logo.

thank so much
theglassslipperllc.com

#4

This is how I want the mobile back ground to look, The attached image fitting the whole mobile screen. and the photo is sized for mobile so I am not sure why it is not working.

www.theglassslipperllc.com

#5

Hi there,

  1. First, please disable the parallax in your background image for mobile

Then add this code to your global custom javascript

jQuery( function($) { 


function set_full_screen () {
if ( $(window).width() <= 767 ) {
$('.full_screen').css( { height: $(window).height() } );
}
}

$(document).ready( set_full_screen );
$(window).load( set_full_screen );
$(window).resize( set_full_screen );

} );

Then inspect your section that is supposed to be displayed in mobile, then add full_screen to its Class input/option field.

This process should make your section with the mobile background the same in your screenshot.

  1. Landmark titles are styled to be different from standard headlines, which headline do you prefer to copy so we could apply its styling to your landmark?

  2. In that case, you’ll need 3rd party plugin so you could implement social sharing. Custom coding might be also required depending on what and which plugin. Do you have existing social sharing plugin? Because I don’t see one even on single posts.

  3. Try sharing this http://theglassslipperllc.com/princesses-bacon-fest/ now, it now displays the image you set as featured. Please note that Facebook cache what you share, so in order for your changes to take effect you have to use their tools and clear its cache, example https://developers.facebook.com/tools/debug/og/object/

Just input the URL that you wish to share and hit Fetch new scrape information button.

Thanks!

#6

Thank you so much for the help!!! I am only having on problem with the text on the background now. Where ever I add a headline, it appears on my face or at the top. Not at the bottom where I want it to be and where I placed it. I tried adding more rows or gaps but that does work either.

How can I get the headlines at the bottom of the image?

Molly
www.theglassslipperllc.com

#7

Hi there,

Would you please kindly add the headline to the home page or another page which you have duplicated from the home page and give us the URL?

This way we will be able to check the live code of the headline and give you proper suggestion.

Thank you.

#8

Ok, I added the headline. You can see that after I saved it, the headline doesn’t show in cornerstone. The only way I got the headline in the middle of the photo or mobile screen was by adding many empty rows.

Here is my account info if you need to log in

#9

Hi there,

Instead of adding empty rows, please add gaps element with the specific size. You may have multiple gaps and each one have different sizes for each gap.

Example, the bigger gap element is displayed on mobile but hidden on desktop. While the smaller gap element is hidden from mobile but displayed on mobile.

You can inspect your gap element and you can control its visibility through HIDE BASED ON SCREEN WIDTH option. Similar to section’s visibility options.

Thanks!

#10

That did not work, I had tried that already…

www.theglassslipperllc.com

#11

Hi there,

You have this CSS that hides your gap,

    .home #x-section-2 .x-gap {
        display: none;
    }

Please remove it and test it again. And you don’t need to add multiple rows with gap for each, you only need to add one row and 1 gap and make it large.

Thanks.