I have enabled a completely transparent header that turns into a dark gray colour when you scroll down the page, however on mobile size the default is white…can you please recommend how to target this so that I can change it? I am unable to replicate it on my desktop to inspect the element name.

Also, my top content (home page “financial crime training”) is not displaying properly on mobile…is there a way I can target it and change the size or the alignment?

Thanks

@media only screen and (max-width: 1017px){
#header {
    background: #1A1A1A!important;
}
.m_nav_ham {
    background: #fff;
}
}

For the heading … sure, make sure you add a CSS class to the column, then style that differently for mobile, for example:

@media only screen and (max-width: 1017px){
.smaller_text_mobile_col h1 {
    font-size: 32px;
}
.smaller_text_mobile_col h2 {
    font-size: 24px;
}
}

You can also decrease that column’s padding in mobile:

@media only screen and (max-width: 1017px){
.smaller_text_mobile_col {
    padding: 40px!important;
}
}

Any ideas? Thanks

This is visual composer functionality you are speaking of and how is what you were asking for (the text sizing in mobile) in anyway related to the column sizes you are describing…
Please explain from scratch what you are trying to achieve!

I would like to assign a class to these items and create an @media to make some modifications to how the are viewed, but when I assign a class to it the column settings I have set collapse…I can’t have both, I can either keep the column widths that I want OR I can set a custom class, but in this case I need both because otherwise the site is not properly responsive at a medium size.

On another note – of course you can assign CSS classes to anything and surely style all elements according to your needs.
What css classes + css you assign where and why would those matter with your column settings?? Why would you bother with the column’s width… that’s not something you want to touch, is it??
How about you tell me exactly what you are trying to achieve under what resolution, maybe then I give you some hints (or at least try).

http://manchestercf.com/correspondent-banking-financial-crime-training/

When the screen size is full on a regular desktop, the wave image looks great.

As the screen becomes smaller, the wave image ends up looking far too tall…I would like it to become smaller, but that means adjusting all of the other elements around it (the PDF with the transparent background etc).

What is the best method to shrink this down around 1200px screen size?

___

As an alternative I tried to create a revolution slider to achieve the look, but I am having difficulty getting the buttons to work…the styles are not applying and the links don’t work when I view the site (using private browsing, so i’m not logged in). Any ideas?

Thanks

All options for all device sizes are turned on, but the content on the right (PDF download, social share) are never available on iPhone size and the header banner image (wave) is not present when the page loads in vertical orientation:

http://manchestercf.com/mobilescreenshotdemo/

I seem to have all functions turned on for this, what am I missing?

Thanks!

Yes, the the content on the right is there, it’s just stacked below the headings, that’s how columns stack on top of one another in responsive – scroll down and you will see it.
Since you have some much custom styles added to that column you need to make sure you override them in responsive to make things looking good again.
You need to also set the height of the left column – you have some huge spacings there you need to remove in responsive, again with CSS classes and media queries! For example make a class that will hide elements below certain width and assign it to your spacings!