Copy overlapping footer in tablet/mobile sizes.

Community Beginner ,
Jul 27, 2017 Jul 27, 2017

Copy link to clipboard

Copied

For some reason when a shrink my browser to replicate mobile/tablet sizes my long copy overlaps my footer. My footer is set on the master page and works on other pages. It also appears to work in the program when I drag the sizer but when I upload it does not. I think this website might be the death of me. Any help is appreciated!!

I also have the same issue on another page in 2 of my breakpoints - in one of them it works fine.

Screen Shot 2017-07-27 at 5.21.45 PM.pngScreen Shot 2017-07-27 at 5.32.15 PM.png

Views

582

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Adobe Community Professional , Jul 31, 2017 Jul 31, 2017
To trim sizes of pictures it is normally best to use PS and "save for web and devices". Of course it is also best practise to set them to the size you want it to appear on/in the www. It is not useful to make pictures larger in order to see better results on a published website.As long as you don´t use fullscreen images set them exactly the size you have set your "placeholders".I did a short test and exported from LR and from PS. Surprisingly the export out of LR creates the "smaller" sized imag...

Likes

Translate

Translate
Adobe Community Professional ,
Jul 27, 2017 Jul 27, 2017

Copy link to clipboard

Copied

Well, if you use your scrubber towards tablet and mobile it´s not just for some reason.The text must extent and normally pushes the footer down.

Take care that your footer area on master looks like this with the guiding lines set correctly and check the "FOOTER"

Bildschirmfoto 2017-07-28 um 00.48.01.png

Bildschirmfoto 2017-07-28 um 00.48.19.png#

Of course your text on your content pages should not have checked this.

Does this help?

Best Regards,

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 27, 2017 Jul 27, 2017

Copy link to clipboard

Copied

I have both of these set the same way. I am at a loss!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 27, 2017 Jul 27, 2017

Copy link to clipboard

Copied

Link us the .muse file via Dropbox or a similar service. This is the only way we can help.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 27, 2017 Jul 27, 2017

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 27, 2017 Jul 27, 2017

Copy link to clipboard

Copied

On my side nothing overlaps but I didn`t check 42 pages.

Which page do you want us to look at?

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 28, 2017 Jul 28, 2017

Copy link to clipboard

Copied

Happens here in footer:

CANTON CAR WASH: ABOUT: FAQS - Frequently Asked Questions.

And here in normal copy - the word "packages" overlaps below:

CANTON CAR WASH: SERVICES: WASHES - Full Service & Exterior Only Washes. Best Car Wash in Maryland.

All at smaller sizes. Tried refreshing when I resized browser and that did not help.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 28, 2017 Jul 28, 2017

Copy link to clipboard

Copied

E&Back​: Please read this document: https://forums.adobe.com/docs/DOC-8652

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 28, 2017 Jul 28, 2017

Copy link to clipboard

Copied

Will do. Sorry was unaware. Thanks!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 28, 2017 Jul 28, 2017

Copy link to clipboard

Copied

Here you go! A trimmed down file WeTransfer

Happens on the FAQs page overlapping the footer and on the washes page the word "packages" overlaps the below content - both at smaller size.

Again, my apologies!! Thanks for the help.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 28, 2017 Jul 28, 2017

Copy link to clipboard

Copied

Wow, trimmed down and still 69 MB.

Let´s check it.

This beautiful rosé shows a missing font, if you have it on your computer, ok, but it seems to be a system font. You should avoid this, if you want to appear it as a real font and so should be readable by all these web crawlers for SEO.

Bildschirmfoto 2017-07-28 um 16.29.46.png

Bildschirmfoto 2017-07-28 um 16.28.45.png

I used FIRA SANS BOOK, try if you could live with this one as well, but it´s your design.

The word PACKAGES and the text and the headline should not be in one text layer, obviously.

Better put it in three layers, create a paragraph style for it and it is better for handling and better for SEO.

If we talk about the same?

Bildschirmfoto 2017-07-28 um 16.43.54.png

In my case, btw, it does not overlap anything but it is still bad practice to handle text like this .

The same happens to your FAQ page. Start to put headlines and text in separate layers and try if this helps.

As soon as you check this little box in site properties, your footer moves corresponding to your text extension:

Bildschirmfoto 2017-07-28 um 16.54.01.png

Hope this helps but be aware that there are some text elements that need to get changed into web fonts.

Best Regards,

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 28, 2017 Jul 28, 2017

Copy link to clipboard

Copied

Let me do another suggestion: Your FAQ just screams for an accordion, because it is really lots of text for people to read.

You had it even twice now: Question 1, leads to anchor of Q1 where the question appears again and so on.

It could get very handy with an accordion, I guess.

Each section could have its own size.

Add to  Günter Heißenbüttel​​ , I didn`t take care about the anchors really, but this also leads to the accordion, I guess

Best Regards,

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 28, 2017 Jul 28, 2017

Copy link to clipboard

Copied

I thought about an accordian but was afraid with so much content. Maybe I will give it a try - thanks!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 29, 2017 Jul 29, 2017

Copy link to clipboard

Copied

E&Back  schrieb

I thought about an accordian but was afraid with so much content. Maybe I will give it a try - thanks!

Because of this the accordion provides advantages. One more – you could pimp each answer box with pictures.

How cool would this be for you?

Best Regards,

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guide ,
Jul 28, 2017 Jul 28, 2017

Copy link to clipboard

Copied

fotoroeder  написал(а)

Wow, trimmed down and still 69 MB.

Let´s check it.

This beautiful rosé shows a missing font, if you have it on your computer, ok, but it seems to be a system font. You should avoid this, if you want to appear it as a real font and so should be readable by all these web crawlers for SEO.

You are wrong. This is a normal web font. It's just not on your computer. If it was a system font, you would see the icon in the corner, even if your computer does not have this font.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 28, 2017 Jul 28, 2017

Copy link to clipboard

Copied

Thanks Pavel.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 28, 2017 Jul 28, 2017

Copy link to clipboard

Copied

My findings:

If you delete all anchors on the „FAQ“ page, all seems to work well. There are design glitches, but that is not the question.

This indicates, that the file is/was corrupted. These anchore are completely useles, because as they are applied, they are fixed, while the page is growing. This means: The anchors don’t go to the place, they should.

The „washes“ page: Activate the complete box „Unlimited Platinum … and use the double arrow move handle to the left of this box to move down all content a little bit. Do this in every breakpoint. Obviously there is a slight overlapping of the text box above:

screen.png

As uwe​ already said: Seems not very cooperative to give as a THAT slow 70 MB file: Too many masterpages, too many elements, which have nothing to do with the problems, tons of upload file links, which in no way touch the layout.

If the problems persist: I only look at this file again, when it is considerably(!) reduced.​ No offend, but I think, this must be said, for  letting off steam!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 28, 2017 Jul 28, 2017

Copy link to clipboard

Copied

So, I thought in order to push down the content the text box had meet the box below. Is this not the case?

Sorry to ruffle so many feathers - I am learning as I go and I appreciate any tips I can get! What do you suggest to make the file smaller? Thanks!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 29, 2017 Jul 29, 2017

Copy link to clipboard

Copied

E&Back

Sorry to ruffle so many feathers - I am learning as I go and I appreciate any tips I can get! What do you suggest to make the file smaller? Thanks!

E&Back​ , you may watch here: CANTON CAR WASH: SERVICES: WASHES - Full Service & Exterior Only Washes. Best Car Wash in Maryland.

The file is now less than 1/3 of your data space and has lost two breakpoints (1900 and 600 ?).

I was personally interested, how one can downsize files and there´s one possibility.

Maybe deleting breakpoints spent the most diskspace?

I also suggested a way how to order your text elements, feel free to choose your original font.

If it is a webfont, great, if it is only a system font, change to a webfont, that fits your needs (SEO).

Also it is just one accordion and it is not finished in styling as you may need it, but … you may see how space could be saved.

Best Regards,

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 31, 2017 Jul 31, 2017

Copy link to clipboard

Copied

@fotoroederThank you so much! I will definitely take a look. Appreciate it! Any other ideas on what I can do to trim the size? I assume the larger the size of the file, the larger it takes to load? I am still working on optimizing the photos.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 31, 2017 Jul 31, 2017

Copy link to clipboard

Copied

LATEST

To trim sizes of pictures it is normally best to use PS and "save for web and devices". Of course it is also best practise to set them to the size you want it to appear on/in the www. It is not useful to make pictures larger in order to see better results on a published website.

As long as you don´t use fullscreen images set them exactly the size you have set your "placeholders".

I did a short test and exported from LR and from PS. Surprisingly the export out of LR creates the "smaller" sized images:

Homepage

Best Regards,

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guide ,
Jul 27, 2017 Jul 27, 2017

Copy link to clipboard

Copied

Where do you view it? Have your screenshots been taken from the desktop browser? If so, after changing the width of the browser, reload the page. And look at the real device. Overlapping often occurs due to the fault desktop browser, since it does not have time to process css when the width changing manually.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 28, 2017 Jul 28, 2017

Copy link to clipboard

Copied

Happens here in footer:

CANTON CAR WASH: ABOUT: FAQS - Frequently Asked Questions.

And here in normal copy - the word "packages" overlaps below:

CANTON CAR WASH: SERVICES: WASHES - Full Service & Exterior Only Washes. Best Car Wash in Maryland.

All at smaller sizes. Tried refreshing when I resized browser and that did not help.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 28, 2017 Jul 28, 2017

Copy link to clipboard

Copied

The boxes are not allowed to overlap, if you want them to interact.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 28, 2017 Jul 28, 2017

Copy link to clipboard

Copied

I know that but they don't have to be touching? Thanks!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines