Modified Login Widget

[russellelliott]

Added 2 columns:

• left: image (column has 20% width, image has 70% width, aligned to center)
• right: heading

the login widget has 90% width

the "why register" link has 90% width and 10px padding on the left and right

• links to a "why register" page

custom code for the column housing the login widget section -> column -> inner section -> column

selector{
    width:100% !important;
    margin-left:auto;
    margin-right:auto;
}

custom code for the login widget and the link underneath

selector{
    width:90%;
}

How to add inner sections inside inner sections https://www.youtube.com/watch?v=i2Tust3p8dw

Here's what I did for the widget

1. made new section with 2 columns
2. inside the section's left column i added an inner section with 2 columns
3. copy-paste inner section inside the inner section within the section for the login widget

Here is the file structure to give you a sense of where the custom code is located in relation to everything else within the login widget.

[russellelliott]

Updates:

Login Page

• mountain icon is 50% width on mobile
• "SierraHiking.net" text is centered horizontally and vertically

padding of "Sierrahiking.net text" (needs to be centered in table, but it's actually centered in its own column)

• 100px for desktop

Master Map

• hide featured image
• added title only visible to mobile (go to advanced -> responsive, and selected "Hide on Desktop" and "Hide on Tablet"

custom code for that:

<script>
    function coverImage(){
        //get elements by class name
        //https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp
            var coverImages = document.getElementsByClassName('entry-cover-image');
            var imageHeaders = document.getElementsByClassName('single-featured-image-header');
            if(screen.width <= 767){
                //CSS !important in Javascript
                //https://stackoverflow.com/questions/38454240/using-css-important-with-javascript
                coverImages[0].style.setProperty('display', 'none', 'important'); //hide the color div
                imageHeaders[0].style.setProperty('display', 'none', 'important'); //hide the div
            }
    }

    window.addEventListener('load', coverImage);

</script>

made the hamburger menu open in front of the map by increasing z index custom code in section:

selector{
    z-index: 3000;
}

[jcockroft64]

Done.