mobile text size and alignment fix

This commit is contained in:
Arvind Tiwari 2017-11-29 01:30:50 +05:30
parent 3eebed6245
commit 1d3307043e
7 changed files with 69 additions and 101 deletions

View file

@ -964,29 +964,6 @@ section h3.section-comment {
color: #494949; color: #494949;
} }
small-comment {
font-family: "Open Sans", "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
margin-bottom: none;
font-transform: none;
font-size:10px;
font-weight:400;
color: #777
}
logo-image {
z-index: 100;
position: absolute;
left: 0;
width: 80px;
height: 80px;
margin-left: 0;
border: 7px solid #f1f1f1;
border-radius: 100%;
text-align: center;
color: #fff;
background-color: #a1cfd7;
}
.intro-small { .intro-small {
font-family: 'Montserrat' ,'Raleway', "Open Sans Bold", Helvetica, Arial, "Arial Bold", sans-serif; font-family: 'Montserrat' ,'Raleway', "Open Sans Bold", Helvetica, Arial, "Arial Bold", sans-serif;
font-size: 20px; font-size: 20px;

View file

@ -960,29 +960,6 @@ section h3.section-comment {
color: #494949; color: #494949;
} }
small-comment {
font-family: "Open Sans", "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
margin-bottom: none;
font-transform: none;
font-size:10px;
font-weight:400;
color: #777
}
logo-image {
z-index: 100;
position: absolute;
left: 0;
width: 80px;
height: 80px;
margin-left: 0;
border: 7px solid #f1f1f1;
border-radius: 100%;
text-align: center;
color: #fff;
background-color: #a1cfd7;
}
.intro-small { .intro-small {
font-family: 'Montserrat' ,'Raleway', "Open Sans Bold", Helvetica, Arial, "Arial Bold", sans-serif; font-family: 'Montserrat' ,'Raleway', "Open Sans Bold", Helvetica, Arial, "Arial Bold", sans-serif;
font-size: 20px; font-size: 20px;

View file

@ -345,15 +345,15 @@ section {
section h2.section-heading { section h2.section-heading {
margin-top: 0; margin-top: 0;
margin-bottom: 15px; margin-bottom: 15px;
font-size: 24px; font-size: 18px;
color: #494949; color: #494949;
} }
section h3.section-subheading { section h3.section-subheading {
margin-bottom: 75px; margin-bottom: 50px;
text-transform: none; text-transform: none;
font-family: 'Raleway', "Helvetica Neue", "Open Sans", "Droid Serif", Helvetica, Arial, sans-serif; font-family: 'Raleway', "Helvetica Neue", "Open Sans", "Droid Serif", Helvetica, Arial, sans-serif;
font-size: 18px; font-size: 16px;
font-weight: 400; font-weight: 400;
color: #494949; color: #494949;
line-height: 1.4; line-height: 1.4;
@ -366,6 +366,10 @@ section h3.section-subheading {
section h2.section-heading { section h2.section-heading {
font-size: 40px; font-size: 40px;
} }
section h3.section-subheading {
font-size: 18px;
margin-bottom: 75px;
}
} }
.service-heading { .service-heading {
@ -431,7 +435,7 @@ section h3.section-subheading {
} }
#portfolio .portfolio-item .portfolio-caption h4 { #portfolio .portfolio-item .portfolio-caption h4 {
margin: 0 0 20px; margin: 0 0 17px;
text-transform: none; text-transform: none;
color: #494949; color: #494949;
} }
@ -450,7 +454,7 @@ section h3.section-subheading {
display: inline-block display: inline-block
} }
@media(min-width:767px) { @media(min-width:768px) {
#portfolio .portfolio-item { #portfolio .portfolio-item {
margin: 0 0 30px; margin: 0 0 30px;
} }
@ -560,6 +564,10 @@ section h3.section-subheading {
color: inherit; color: inherit;
} }
.timeline .timeline-heading h4 {
margin-bottom: 0;
}
.timeline .timeline-heading h4.subheading { .timeline .timeline-heading h4.subheading {
text-transform: none; text-transform: none;
} }
@ -657,7 +665,7 @@ section h3.section-subheading {
} }
.team-member { .team-member {
margin-bottom: 50px; margin-bottom: 25px;
text-align: center; text-align: center;
} }
@ -667,11 +675,27 @@ section h3.section-subheading {
} }
.team-member h4 { .team-member h4 {
margin-top: 20px; margin-top: 10px;
margin-bottom: 20px; margin-bottom: 10px;
text-transform: none; text-transform: none;
} }
@media(max-width:767px) {
.team-member .team-member-caption p {
line-height: 1.5;
}
}
@media(min-width:768px) {
.team-member {
margin-bottom: 50px;
}
.team-member h4 {
margin-top: 20px;
margin-bottom: 20px;
}
}
.team-member p { .team-member p {
margin-top: 0; margin-top: 0;
} }
@ -692,6 +716,15 @@ section#contact .section-heading {
font-size: 32px; font-size: 32px;
} }
@media(max-width:767px) {
section#contact .section-heading {
font-size: 20px;
}
section#contact .intro-smallcap {
font-size: 18px;
}
}
section#contact .form-group { section#contact .form-group {
color:white; color:white;
margin-bottom: 25px; margin-bottom: 25px;
@ -903,36 +936,15 @@ section h3.section-comment {
color: #494949; color: #494949;
} }
small-comment {
font-family: "Open Sans", "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
margin-bottom: none;
font-transform: none;
font-size:10px;
font-weight:400;
color: #777
}
logo-image {
z-index: 100;
position: absolute;
left: 0;
width: 80px;
height: 80px;
margin-left: 0;
border: 7px solid #f1f1f1;
border-radius: 100%;
text-align: center;
color: #fff;
background-color: #fed136;
}
.carousel-indicators li.active, .text-carousel .carousel-indicators li.active { .carousel-indicators li.active, .text-carousel .carousel-indicators li.active {
border: 0; border: 0;
background-color: #fed136; background-color: #fed136;
} }
@media (min-width: 740px)
.carousel-inner, .text-carousel .carousel-inner { @media (min-width: 740px) {
min-height: 225px; .carousel-inner, .text-carousel .carousel-inner {
min-height: 225px;
}
} }
.carousel-text { .carousel-text {

View file

@ -120,15 +120,11 @@
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.portfolio-item .portfolio-caption p, .intro-smallcap.sm_left,
section h2.section-heading, .section-heading.sm_left,
section h3.section-subheading, .section-subheading.sm_left {
#portfolio .portfolio-item .portfolio-caption h4 {
text-align: left;
}
section h2.section-heading,
section h3.section-subheading {
padding-left: 15px; padding-left: 15px;
padding-right: 15px;
} }
} }
@ -251,6 +247,12 @@
padding-bottom: 0; padding-bottom: 0;
} }
@media (max-width: 767px) {
.sm_left {
text-align: left !important;
}
}
@media (min-width: 768px) and (max-width: 991px) { @media (min-width: 768px) and (max-width: 991px) {
.timeline>li .timeline-panel { .timeline>li .timeline-panel {

View file

@ -12,16 +12,16 @@
<strong>{{ message }}</strong> <strong>{{ message }}</strong>
</div> </div>
{% endfor %} {% endfor %}
<h2 class="section-heading">{% trans "Contact Us" %}</h2> <h2 class="section-heading sm_left">{% trans "Contact Us" %}</h2>
<h3 class="intro-smallcap" style="line-height: 1.2;"> <h3 class="intro-smallcap sm_left" style="line-height: 1.2;">
{% trans "Join us at" %} <a href="{% url 'digitalglarus:landing' %}">{% trans "Digital Glarus" %}</a>, {% trans "a great co-working space in the middle of Alps!" %} <br> {% trans "Join us at" %} <a href="{% url 'digitalglarus:landing' %}">{% trans "Digital Glarus" %}</a>, {% trans "a great co-working space in the middle of Alps!" %} <br>
{% trans "You can contact us at" %} {% trans "You can contact us at" %}
</h3> </h3>
<h3 class="intro-smallcap"> <h3 class="intro-smallcap sm_left">
<a href="mailto:info@ungleich.ch"><i class="fa fa-envelope"></i> <strong>info@ungleich.ch</strong></a> <a href="mailto:info@ungleich.ch"><i class="fa fa-envelope"></i> <strong>info@ungleich.ch</strong></a>
</h3> </h3>
<h3 class="intro-smallcap"><i class="fa fa-phone"></i> (044) 534-66-22</h3> <h3 class="intro-smallcap sm_left"><i class="fa fa-phone"></i> (044) 534-66-22</h3>
<!-- <h3 class="intro-smallcap">{% trans "or" %}</h3> --> <!-- <h3 class="intro-smallcap">{% trans "or" %}</h3> -->
<!-- <h3 class="intro-smallcap">{% trans "Contact Us" %}</h3> --> <!-- <h3 class="intro-smallcap">{% trans "Contact Us" %}</h3> -->

View file

@ -4,27 +4,27 @@
<section id="portfolio" class="bg-light-gray"> <section id="portfolio" class="bg-light-gray">
<div class="container"> <div class="container">
<div class="text-center wow fadeInUp"> <div class="text-center wow fadeInUp">
<h2 class="section-heading">{% trans "Our Products" %}</h2> <h2 class="section-heading sm_left">{% trans "Our Products" %}</h2>
<h3 class="section-subheading text-muted" style="line-height: 1.5;">{% blocktrans %}Our products include an innovative datacenter,<br>affordable VM hosting, and high speed fiber internet for canton Glarus.{% endblocktrans %}</h3> <h3 class="section-subheading text-muted sm_left" style="line-height: 1.5;">{% blocktrans %}Our products include an innovative datacenter,<br>affordable VM hosting, and high speed fiber internet for canton Glarus.{% endblocktrans %}</h3>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-4 col-sm-6 portfolio-item wow fadeInUp" data-wow-delay="0.25s"> <div class="col-md-4 col-sm-6 portfolio-item wow fadeInUp" data-wow-delay="0.25s">
<a href="{% url 'datacenterlight:index' %}"><img src="{% static 'ungleich_page/img/portfolio/datacenterlight.png' %}" class="img-responsive inline-block" alt=""></a> <a href="{% url 'datacenterlight:index' %}"><img src="{% static 'ungleich_page/img/portfolio/datacenterlight.png' %}" class="img-responsive inline-block" alt=""></a>
<div class="portfolio-caption inline-block"> <div class="portfolio-caption inline-block sm_left">
<h4>{% trans "Data Center Light" %}</h4> <h4>{% trans "Data Center Light" %}</h4>
<p class="text-muted">{% trans "We offer the most affordable hosting in Switzerland. Data Center Light has full FOSS stack, 100% IPv6 and 100% SSD. Choose any configuration among CentOS, Debian, Ubuntu, Devuan, and FreeBSD." %} </p> <p class="text-muted">{% trans "We offer the most affordable hosting in Switzerland. Data Center Light has full FOSS stack, 100% IPv6 and 100% SSD. Choose any configuration among CentOS, Debian, Ubuntu, Devuan, and FreeBSD." %}</p>
</div> </div>
</div> </div>
<div class="col-md-4 col-sm-6 portfolio-item wow fadeInUp" data-wow-delay="0.5s"> <div class="col-md-4 col-sm-6 portfolio-item wow fadeInUp" data-wow-delay="0.5s">
<a href="{% url 'rails.hosting' %}"><img src="{% static 'ungleich_page/img/portfolio/startup-framework.png' %}" class="img-responsive inline-block" alt=""></a> <a href="{% url 'rails.hosting' %}"><img src="{% static 'ungleich_page/img/portfolio/startup-framework.png' %}" class="img-responsive inline-block" alt=""></a>
<div class="portfolio-caption inline-block"> <div class="portfolio-caption inline-block sm_left">
<h4>{% trans "Rails Hosting" %} </h4> <h4>{% trans "Rails Hosting" %} </h4>
<p class="text-muted">{% trans "Ready to go live with your Ruby on Rails application? We offer you ready-to-deploy virtual machines or configure your existing infrastructure for Ruby on Rails." %}</p> <p class="text-muted">{% trans "Ready to go live with your Ruby on Rails application? We offer you ready-to-deploy virtual machines or configure your existing infrastructure for Ruby on Rails." %}</p>
</div> </div>
</div> </div>
<div class="col-md-4 col-sm-6 portfolio-item wow fadeInUp" data-wow-delay="0.75s"> <div class="col-md-4 col-sm-6 portfolio-item wow fadeInUp" data-wow-delay="0.75s">
<a href="{% url 'datacenterlight:glasfaser' %}"><img src="{% static 'ungleich_page/img/portfolio/glasfaser.png' %}" class="img-responsive inline-block" alt=""></a> <a href="{% url 'datacenterlight:glasfaser' %}"><img src="{% static 'ungleich_page/img/portfolio/glasfaser.png' %}" class="img-responsive inline-block" alt=""></a>
<div class="portfolio-caption inline-block"> <div class="portfolio-caption inline-block sm_left">
<h4>{% trans "High Speed Internet" %}</h4> <h4>{% trans "High Speed Internet" %}</h4>
<p class="text-muted">{% trans "We offer high speed fiber internet in Glarus Süd, Glarus and Glarus Nord. Experience 100 Mbit/s and see how speed can change everything." %}</p> <p class="text-muted">{% trans "We offer high speed fiber internet in Glarus Süd, Glarus and Glarus Nord. Experience 100 Mbit/s and see how speed can change everything." %}</p>
</div> </div>

View file

@ -4,8 +4,8 @@
<section id="services"> <section id="services">
<div class="container"> <div class="container">
<div class="text-center wow fadeInDown"> <div class="text-center wow fadeInDown">
<h2 class="section-heading">{% trans "our services" %}</h2> <h2 class="section-heading sm_left">{% trans "our services" %}</h2>
<h3 class="section-subheading text-muted"> <h3 class="section-subheading text-muted sm_left">
{% trans "We support our clients in all areas of Unix infrastructure." %}<br/> {% trans "We support our clients in all areas of Unix infrastructure." %}<br/>
{% trans "Our top notch configuration management is refreshingly simple and reliable." %} {% trans "Our top notch configuration management is refreshingly simple and reliable." %}
</h3> </h3>