Hi Max,

It wouldn't be needed for your solution as you are using a different position but if Elizabeth wanted to use the banner it may be needed

Cheers
Paul

I do not understand this,,,, what was the accompanying CSS that is defined by top50? please and is it in the module with the slide show?

There are three different methods suggested

1. By Max using a different position site wide on all screens and a module class added to the slideshow module
2. By me suggesting you adjust the module width in the responsive section of the template combined with adding some css I suggested.
3. You could hide one slideshow module on mobile and use max's suggestion by adding his suggestion and display that only on mobile

Cheers
Paul

That's ok Paul, thanks for your summary.

Anyway, I changed my initial position of the imageslide, from Grid1 (or Grid3) to the more dedicated Banner module, adding Top50 in the Module Classes of the Advanced Settings of my imageslide Module.

If it could be of help, here are some Module Classes from Newstream2 Demo:
demo.joomlabamboo.com/index.php?theme=sep14

Thanks Max

Cheers

with the link I think perhaps this link

bambootheme.com/showcase/sep14/features-of-templates/module-overview/module-classes

I did everything that you advised me to but am still having the problem. I made the logo as wide as I could in the small and xsmall without knocking out part of the menu toggle and I added the code:

@media screen and (max-width:750px) {
#banner.col-xs-12, #banner.col-sm-12, #banner.col-md-12, #banner.col-lg-12 {padding-left:0; padding-right:0}
#banner.col-lg-12.col-md-12.col-sm-12.col-xs-12 {padding-left:0; padding-right:0}
}

to my custom.css... but those remedies did not work.. please see attached image
Thanks Elizabeth

Hi Elizabeth,

I can see the padding change applying when I view on a desktop when testing on mobile views

If you adjust the responsive width to 8 logo and 4 menu on extra small does that improve things?

You could adjust via a media query but I'd suggest removing the inline styling currently used in the logo

<div style="font-size: 17px; margin: 0; padding: 0;">

no and additionally it cuts off part of the toggle menu

OK I removed the inline styling. (leaves the text small but) ... what is the media query?
Thanks, Elizabeth

Have you tried 7 and 5 widths on xs small?

The problem is that the slideshow was never intended to show on a mobile so as the width decreases so does the height

You could try something along the lines of this

#logo a {font-size:18px;}

@media screen and (max-width:450px){
#logo a {font-size:16px;}
#logo {margin-top:0;margin-bottom: 0px;}
}

but still the problem is still the available width

Last Try... Please see the attached change in positions and let me know if you think it has a chance of working. This will be my last try. Thank you.

My two pence: don't mind about the positions you have not assigned to a Module. I just set "none" in the module I don't need or hide them in responsive layouts.

What I can do, is attaching my settings for comparison, if may be of help.
I put the Menù in off-canvas. The imageslide in Grid1, at the side of Logo. My logo is a HTML Module with image.

Module position:



Responsive layout LARGE



Responsive SMALL:



Theme Magic:
GRID (with Layout dimensions)



Base colors (with Minimum Banner Height)

Sorry, imageslide is in BANNER position.

My Grid1, at the side of the Logo position, is another HTML with image.

ok might have a simpler way of doing this

2 slideshow modules one a duplicate of the first
Both published to the same module position

Slideshow 1 module will be set to show on all positions bar the xs position e.g. mobile

Slideshow 2 module will be set to show only on mobile and have a margin class adding space (margin) between the logo area and the banner

Slideshow 1 has module class hidden-xs (with space before it)