Docs

[tylervarian]

Hi. I have created a website that looks great on notebook 15″ screen but horrible on mobile and a large 27″ desktop monitor.

This is the front page:
http://69.195.124.107/~tudiofi8/ All WP, X and CS versions are up to date.

MOBILE SITUATION:
What I would like to happen on MOBILE is when you open the site the first image (Adam) takes up the whole phone screen. Then when you scroll down the second image (blue background) takes up the whole phone screen. Then the different training copy takes up the whole phone screen (One Training piece at a time).

When you look at the current site on a cell phone everything is different sizes with no consistency.

27″ DESKTOP SITUATION:
When the site is open on the desktop the black and white images do not connect (corner to corner), the copy under each Training section is so small and almost unreadable. When I stretch and maximize the viewing area and minimize the viewing area the site does not stay together. Images change size, text gets tiny and illegible. There is no consistency and the site sections just come apart.

Can you help? Thanks so much!

ATTACHED is a screenshot from the large desktop. Do you see how the images change size and the copy gets small?

[tylervarian]

p.s. I originally built the top two images in Slider Revolution – Hero Image with the same responsiveness issues so I went back and simply added via Cornerstone- Image with the same outcome. Not sure which is the best way to address issues.

[tylervarian]

Here is the attachment again.

[Joao]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

Joao

[tylervarian]

This reply has been marked as private.

[Joao]

Hi Tyler,

Regarding 27th

On the image where the girl and the guy are exercising with the balls, the image is not strechiting like on the others because you haven´t set the same styling code at the Style Box of the Image Element.

I went ahead and placed the code for you, it is the same you have on the images where everything is working as it should :

width: 100%; margin-bottom: 0;

Regarding your mobile view, you could achieve a similar result if you use the images background images instead. Understand that in order that your images are shown on the whole screen they will need either to be cut or really distorted, because you are changing from a landscape screen to a portrait screen. In The case of your first image you could use the same grey image and have the text as A Custom Headline and a Text Element on top, that way the text also would adjust to the size proportionally. And the same for the section below. You could use the same background and type the text on text elements.

Let us know your thoughts,

Joao

[tylervarian]

OK, So if I’m understanding you correctly, in order to set the images as you discussed (background with text layer, etc.) Should I do this in Revolution Slider and set as a Hero Image?

Thanks so much!

[tylervarian]

Wait, I think I gotcha. Let me work in Cornerstone to see if I can achieve the look the way you explained. I will get back with you. Thanks for your help!

[Prasant Rai]

You are most welcome. 🙂

[tylervarian]

Hi. OK. I got it. You are right (of course) when I type in the text it holds it’s form much better. Love it! Thanks! One more question having to do with this. How do I select a font size between P (paragraph) and H6, H5? I want the font to look like paragraph but a bit larger. Because I don’t know how to find this option, I end up selecting H6 or H5 and dealing with the BOLD-ness of the font. Is there any way to select something that isn’t a header but isn’t as small as Paragraph?

Thanks again! You guys (gals) are awesome!

[Joao]

Hi Tyler,

You can use a text Element

And on the Style Box at the bottom of the element you can add

font-size: 20px;

Than you can adjust the size of the font-size according to your wishes.

Let us know if that helps, If you need help with more detailed customization just let us know what are your goals and we will gladly help you.

Thanks

Joao

[tylervarian]

I can’t even begin to tell you how helpful you are! Such great support,especially for a newbie!

🙂

[Nico]

Happy to hear that.

Feel free to ask us again.

Thanks.

[tylervarian]

This reply has been marked as private.

[Lely]

Hi There,

Your background image original size is 1260×601. The content inside OUR TRAINERS section is roughly 140px. Then you have added top padding of 250px and bottom padding of 100px. Total height of that section is just more or less 490px. By default the background image will just cover the entire section from the center of the image. Since the section height is just roughly 490px, most likely the background image will not be visible entirely because it’s more than what is needed.
You may want to adjust the position of the background by adding this custom CSS on Settings Tab > Custom CSS:

div#meettheteam {
    background-position: top right;
}

That custom CSS will the background start from Top and Right part of the image to make sure that the image part of the guys is always visible. Then you may want to adjust the bottom padding of the section for us to see the entire picture of the second guy.

This background image is not suited for mobile view. Add this CSS:

@media (max-width: 767px){
div#meettheteam {
    background-image: none; /*Remove the image and so we're seeing the default background color*/
    padding: 50px 0 !important; /*250px and 100px is too much space on mobile view. We have adjust to 50px*/
}
}

Hope this helps.

[Author]

Posts