Java Script not wrapping at 480 Breakpoints

[rongreen]

I have a JavaScript element (Javascritpt1) in a Layoutgrid (LayoutGrid8) and it formats properly at default breakpoint. But when I get down to lower one (e.g. 480) it refuses to wrap properly. I have looked at its settings in properites, but cannot find what needs to be changed? I would appreciate any help and suggestions on how to get this set up correctly? Thank you.


https://www.greensphotoimages.com/alljo ... y_help.zip

[BaconFries]

By javascript1 you mean you are referring to the typewriter deluxe from Ready-to-use-JavaScripts? if so then the font is not responsive as it is embedded in the script so it's size remains the same in all breakpoints and won't wrap to match.

[crispy68]

As BaconFries stated, if you are referring to the text size, it is not responsive in breakpoints.

However, the text does wrap to the next line. If you are referring to the fact that container (layout grid) does not expand height wise to accommodate the wrapping text then it is because the height of JavaScript1 is a fixed height. You can fix this issue by adding the following CSS to the page header:

Code: Select all

<style>
#wb_JavaScript1{height:auto;}
</style>

If you want to also change the size of the font at the breakpoint, there is some additional CSS that can be added to make that happen.

[rongreen]

Thank you for all the great explanations and suggestions. I am still confused and if you could maybe offer some further clarification I would be very grateful? If you go to my index page of my website (https://www.alljoyjewelry.com/index.html) using a viewport of around 480, you will see it works just fine as expected at differing breakpoints. We used no special code or responsive font. However, all that and other things changed on 9/23 when I upgraded to v19.4.0. The JavaScript when viewed in my local browser now refuses to function as it shows on our actual website. I just upgraded to 19.4.1 and it still is not functioning when viewed in the local browser as it should. I can't understand why the change?




https://www.alljoyjewelry.com/index.html

[Pablo]

I doubt that this has anything to do with the update.
It looks like you have added a 480 breakpoint which did not exist in the published website.

[rongreen]

That’s interesting! How can I tell if break points exist looking at the live site?

[Pablo]

The following is not available in the published page:

@media only screen and (max-width: 1279px)

This is the breakpoint code for everything lower than 1280.
(because the trigger is set to 'Activate breakpoints when browser window is larger than the device widths' )

[rongreen]

Sorry to make this so complicated! But, I could still use some help.
I Inserted the code you provided in Page--> Page HTML "Between <heads></head> tags. That seemed to fix it the problem with the message for the 480px breakpoint except that the menu now crowds up against logo Image (image2). Both are on the master page. Additional, the down arrow for the menu crowds into Jewelry Galleries. I can't seem to find a setting to control this. I changed font size and even type and to no avail. Also, it seems that the menu keeps going to the hamburger style when I click on the container and just marginally jostle it. Finally, the menu encroaches into LayoutGrid8 between 496 and 564 pixels. The Any suggestions? Thank you.


https://www.greensphotoimages.com/alljo ... _help2.zip

[crispy68]

First issue with your current demo is that your master page does not contain a breakpoint. The breakpoints on the master should match the breakpoints on the pages.

2nd, I would suggest using "Activate breakpoints when browser window is larger than the device width". I have found this will give you much better results on mobile devices. You may also want to consider adding another breakpoint as it is a big gap from 1280 to 495. If you do, then you will be able to handle where and how the menu will look for each breakpoint. I would set your Overflow of the grid to Hidden. This allows you to change column size in breakpoints.

You need to set the breakpoint in the menu to be 1px under the breakpoint you want it to switch at. For example, your default is 1280px. If you want it to switch to hamburger just after that then set it to 1279px. Right now, your menu starts wrapping under itself at 1224px. I'm not a fan of that look as it doesnt look as clean to me. It also overflows the container a bit too.

Are you wanting the menu to always stay to the right of the logo or do you want it to flip below the logo at some breakpoint?

[rongreen]

Thank you very much. I want the menu to flip under the logo when the viewport is small large cell and under. Do we have the right menu selected?

[rongreen]

1) Changing the LayuoutGrids to "hidden" made a difference. Thank you! It seems that I need to go and set the breakpoints for each page separately, correct?
2) Is there a way to get the menu down arrow moved so that it is not crowding into the "Jewelry Galleries" label?

[onlye]

Unrelated to the JavaScript.
Consider making your logo the top link to the home page.

[rongreen]

Hi. Do you mean assign a link to the logo that takes you to the index page?