Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Centering Logos, Mobile Compatibility, and DIVs moving on their own? #124

Closed
InvestedBalance opened this issue Sep 15, 2018 · 1 comment
Closed

Centering Logos, Mobile Compatibility, and DIVs moving on their own? #124

InvestedBalance opened this issue Sep 15, 2018 · 1 comment

Comments

@InvestedBalance
Copy link

Hey Tim and Team,

I'm very new to front-end development (but not back-end), and found your Material Kit Pro to be absolutely gorgeous and very suitable to my needs. Below is what currently I have for my landing page (some you'll see is a direct copy and paste from your source code - it's a work in progress...).

I have a question and a couple of issues.
Question:

  1. What is the best way to have a centered logo (image-placeholder.jpg) in the header below the bar? I feel like using the columns and rows the way I am isn't the best, so just let me know please! I just want centered above the text and form.

Issues:

  1. Using this design, on my iPhone X in Google Chrome and Safari, the placeholder.jpg image is cutoff at the top, and the vast majority of my form (including the input field and submit button) are hidden by the

    . Whatever I have done has made it so it isn't mobile compatible.

  2. When I submit an email address on my desktop, when my alert pops up, it moves everything in the top div to the left, and everything in the main main-raised div is to the right (instead of below and slightly overlapping bg3.jpg).

My code is below, if you need anything else please let me know, and I really hope you can help because I've been at a loss with this for two days!

Thank you!

  • [Yes] I am running the latest version
  • [Yes] I checked the documentation and found no answer
  • [Yes] I checked to make sure that this issue has not already been filed
  • [Yes] I'm reporting the issue to the correct repository (for multi-repository projects)
  • Device: PC Laptop and iPhone X
  • Operating System: Pop!_OS and iOS12
  • Browser and Version: Chromium Web Browser 68.0.3440.106, Google Chrome (mobile) 69.0.3497.91, Safari (mobile) 11.1.2

base.html

{% load staticfiles %}
<!doctype html>
<html lang="en">
  <head>
    <title>Invested Balance</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <!--     Fonts and icons     -->
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />

    <!-- Material Kit CSS -->
    <link rel="stylesheet" href="{% static 'assets/css/material-kit.css' %}">

    <script type="text/javascript">
        if (document.readyState === 'complete') {
            if (window.location != window.parent.location) {
                const elements = document.getElementsByClassName("iframe-extern");
                while (elemnts.lenght > 0) elements[0].remove();
                // $(".iframe-extern").remove();
            }
        };
    </script>
</head>
  <body class="sections-page">
        <nav class="navbar bg-primary fixed-top navbar-expand-md " id="sectionsNav">
        <div class="container-fluid">
            <div class="navbar-translate">
                <a class="navbar-brand" href="..">Invested Balance</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                    <span class="navbar-toggler-icon"></span>
                    <span class="navbar-toggler-icon"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse">
        </div>
    </div>
    </nav>
    {% block content %}
    {% endblock %}
    
    <!--   Core JS Files   -->
    <script src="{% static 'assets/js/core/jquery.min.js' %}"></script>
    <script src="{% static 'assets/js/core/popper.min.js' %}"></script>
    <script src="{% static 'assets/js/bootstrap-material-design.js' %}"></script>

    <!-- Plugin for Date Time Picker and Full Calendar Plugin-->
    <script src="{% static 'assets/js/plugins/moment.min.js' %}"></script>

    <!-- Plugin for Select, full documentation here: http://silviomoreto.github.io/bootstrap-select -->
    <script src="{% static 'assets/js/plugins/bootstrap-selectpicker.js' %}"></script>

    <!-- Plugin for Tags, full documentation here: http://xoxco.com/projects/code/tagsinput/  -->
    <script src="{% static 'assets/js/plugins/bootstrap-tagsinput.js' %}"></script>

    <!-- Plugin for Fileupload, full documentation here: http://www.jasny.net/bootstrap/javascript/#fileinput -->
    <script src="{% static 'assets/js/plugins/jasny-bootstrap.min.js' %}"></script>

    <!-- Plugin for Small Gallery in Product Page -->
    <script src="{% static 'assets/js/plugins/jquery.flexisel.js' %}"></script>

    <!-- Plugin for the Datepicker, full documentation here: https://github.com/Eonasdan/bootstrap-datetimepicker -->
    <script src="{% static 'assets/js/plugins/bootstrap-datetimepicker.min.js' %}"></script>

    <!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
    <script src="{% static 'assets/js/plugins/nouislider.min.js' %}"></script>

    <!-- Material Kit Core initialisations of plugins and Bootstrap Material Design Library -->
    <script src="{% static 'assets/js/material-kit.js?v=2.0.0' %}"></script>

  </body>
</html>

signup.html

{% extends "base.html" %}
{% block content %}
	<div class="page-header header-filter clear-filter" data-parallax="true" style="background-image: url('/static/assets/img/bg3.jpg');">
		<div class="container">
			<div class="section col-md-12 ml-auto mr-auto">
	            <div class="row">
	                <div class="col-md">
	                </div>
	                <div class="col-md-6">
	                    <img class="rounded img-fluid" alt="Invested Balance" src="/static/assets/img/image_placeholder.jpg">
	                </div>
	                <div class="col-md">
	                </div>
	            </div>
	        </div>
        <div class="col-md-8 ml-auto mr-auto">
			<h2 class="text-center">Welcome to the future of personal finance</h2>
				<p class="h3 text-center">Stay up to date with the Invested Balance Newsletter!</p>
					{% if messages %}
						{% for message in messages %}
						<div {% if message.tags %} class="{{message.tags}}" {% endif %} role="alert">
							<button type="button" class="close" data-dismiss="alert" aria-lable="close"><span aria-hidden="true">&times;</span></button>
							{{ message }}
						</div>
							{% endfor %}
							{% else %}
							<form method="POST">
								{% csrf_token %}
							 	<div class="form-group">
							  		{% for field in form %}
										{{ field }}
									{% endfor %}
							    	<!-- <small id="emailHelp" class="h5 form-text">We'll never share your email with anyone else</small> -->
								</div>
                    <button type="submit" class="btn btn-primary">Subscribe</button>	
				</form>
		</div>
		{% endif %}
	</div>
</div>
<div class="main main-raised">
            <!--     *********    PROJECTS 4     *********      -->
            <div class="projects-4" id="projects-4">
                <div class="container">
                    <div class="row">
                        <div class="col-md-8 ml-auto mr-auto text-center">
                            <h2 class="title">Some of Our Awesome Projects - 4</h2>
                            <h5 class="description">This is the paragraph where you can write more details about your projects. Keep you user engaged by providing meaningful information.</h5>
                            <div class="section-space"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-5 ml-auto">
                            <div class="card card-background" style="background-image:url('assets/img/kit/pro/examples/card-project2.jpg')">
                                <a href="#pablo"></a>
                                <div class="card-body">
                                    <span class="badge badge-rose">Client: Apple</span>
                                    <a href="#pablo">
                                        <h3 class="card-title">Beautiful Project</h3>
                                    </a>
                                    <p class="card-description">
                                        Don't be scared of the truth because we need to restart the human foundation in truth.
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-5 mr-auto">
                            <div class="info info-horizontal">
                                <div class="icon icon-info">
                                    <i class="material-icons">format_paint</i>
                                </div>
                                <div class="description">
                                    <h4 class="info-title">Graphic Design</h4>
                                    <p class="description">
                                        We&apos;ve created the design of the website using modern Technologies like Sketch. It was a very interesting collaboration.
                                    </p>
                                </div>
                            </div>
                            <div class="info info-horizontal">
                                <div class="icon icon-primary">
                                    <i class="material-icons">code</i>
                                </div>
                                <div class="description">
                                    <h4 class="info-title">Fully Coded in HTML5</h4>
                                    <p class="description">
                                        We&apos;ve developed the website with HTML5 and CSS3. The client has access to the code using GitHub.
                                    </p>
                                </div>
                            </div>
                            <div class="info info-horizontal">
                                <div class="icon icon-danger">
                                    <i class="material-icons">dashboard</i>
                                </div>
                                <div class="description">
                                    <h4 class="info-title">CMS Admin Dashboard</h4>
                                    <p class="description">
                                        There is also a Fully Customizable CMS Admin Dashboard for this product.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-md-5 ml-auto">
                            <div class="info info-horizontal">
                                <div class="icon icon-rose">
                                    <i class="material-icons">timeline</i>
                                </div>
                                <div class="description">
                                    <h4 class="info-title">Marketing</h4>
                                    <p class="description">
                                        We&apos;ve created the marketing campaign of the website. It was a very interesting collaboration.
                                    </p>
                                </div>
                            </div>
                            <div class="info info-horizontal">
                                <div class="icon icon-success">
                                    <i class="material-icons">code</i>
                                </div>
                                <div class="description">
                                    <h4 class="info-title">Fully Coded in HTML5</h4>
                                    <p class="description">
                                        We&apos;ve developed the website with HTML5 and CSS3. The client has access to the code using GitHub.
                                    </p>
                                </div>
                            </div>
                            <div class="info info-horizontal">
                                <div class="icon icon-info">
                                    <i class="material-icons">group</i>
                                </div>
                                <div class="description">
                                    <h4 class="info-title">Built Audience</h4>
                                    <p class="description">
                                        There is also a Fully Customizable CMS Admin Dashboard for this product.
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-5 mr-auto">
                            <div class="card card-background" style="background-image:url('assets/img/kit/pro/examples/card-project5.jpg')">
                                <a href="#pablo"></a>
                                <div class="card-body">
                                    <span class="badge badge-rose">Client: DJ Khaled</span>
                                    <a href="#pablo">
                                        <h2 class="card-title">Another One</h2>
                                    </a>
                                    <p class="card-description">
                                        Don't be scared of the truth because we need to restart the human foundation in truth.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--     *********    END PROJECTS 4      *********      -->
            <!--     *********    TEAM 4     *********      -->
            <div class="team-4 section-dark">
                <div class="container">
                    <div class="row">
                        <div class="col-md-8 ml-auto mr-auto text-center">
                            <h2 class="title">The Executive Team 4</h2>
                            <h5 class="description">This is the paragraph where you can write more details about your team. Keep you user engaged by providing meaningful information.</h5>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="card card-profile">
                                <div class="card-header card-avatar">
                                    <a href="#pablo">
                                        <img class="img" src="/static/assets/img/kit/pro/faces/card-profile1-square.jpg" />
                                    </a>
                                </div>
                                <div class="card-body">
                                    <h4 class="card-title">Alec Thompson</h4>
                                    <h6 class="card-category text-muted">CEO / Co-Founder</h6>
                                    <p class="card-description">
                                        Don&apos;t be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens&#x2019; bed design but the back is...
                                    </p>
                                </div>
                                <div class="card-footer justify-content-center">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card card-profile">
                                <div class="card-header card-avatar">
                                    <a href="#pablo">
                                        <img class="img" src="/static/assets/img/kit/pro/faces/card-profile2-square.jpg" />
                                    </a>
                                </div>
                                <div class="card-body">
                                    <h4 class="card-title">George West</h4>
                                    <h6 class="card-category text-muted">Backend Hacker</h6>
                                    <p class="card-description">
                                        Don&apos;t be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens&#x2019; bed design but the back is...
                                    </p>
                                </div>
                                <div class="card-footer justify-content-center">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card card-profile">
                                <div class="card-header card-avatar">
                                    <a href="#pablo">
                                        <img class="img" src="/static/assets/img/kit/pro/faces/card-profile4-square.jpg" />
                                    </a>
                                </div>
                                <div class="card-body ">
                                    <h4 class="card-title">Gina Andrew</h4>
                                    <h6 class="card-category text-muted">Web Designer</h6>
                                    <p class="card-description">
                                        Don&apos;t be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens&#x2019; bed design but the back is...
                                    </p>
                                </div>
                                <div class="card-footer justify-content-center">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--     *********    END TEAM 4      *********      -->

{% endblock %}
@groovemen
Copy link
Contributor

Hello @InvestedBalance,

Thank you for using our products and sorry for this late response; I tried to reproduce the issue that you have mentioned above and it looks like this:

screenshot 2018-11-16 at 18 59 10

the placeholder image doesn't look to have any problem like being cut so I will ask you to share with us a link to your product to let us check for a solution.

All the best,
Stefan

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@groovemen @InvestedBalance