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;
}
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 {
font-family: 'Montserrat' ,'Raleway', "Open Sans Bold", Helvetica, Arial, "Arial Bold", sans-serif;
font-size: 20px;

View File

@ -960,29 +960,6 @@ section h3.section-comment {
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 {
font-family: 'Montserrat' ,'Raleway', "Open Sans Bold", Helvetica, Arial, "Arial Bold", sans-serif;
font-size: 20px;

View File

@ -345,15 +345,15 @@ section {
section h2.section-heading {
margin-top: 0;
margin-bottom: 15px;
font-size: 24px;
font-size: 18px;
color: #494949;
}
section h3.section-subheading {
margin-bottom: 75px;
margin-bottom: 50px;
text-transform: none;
font-family: 'Raleway', "Helvetica Neue", "Open Sans", "Droid Serif", Helvetica, Arial, sans-serif;
font-size: 18px;
font-size: 16px;
font-weight: 400;
color: #494949;
line-height: 1.4;
@ -366,6 +366,10 @@ section h3.section-subheading {
section h2.section-heading {
font-size: 40px;
}
section h3.section-subheading {
font-size: 18px;
margin-bottom: 75px;
}
}
.service-heading {
@ -431,7 +435,7 @@ section h3.section-subheading {
}
#portfolio .portfolio-item .portfolio-caption h4 {
margin: 0 0 20px;
margin: 0 0 17px;
text-transform: none;
color: #494949;
}
@ -450,7 +454,7 @@ section h3.section-subheading {
display: inline-block
}
@media(min-width:767px) {
@media(min-width:768px) {
#portfolio .portfolio-item {
margin: 0 0 30px;
}
@ -560,6 +564,10 @@ section h3.section-subheading {
color: inherit;
}
.timeline .timeline-heading h4 {
margin-bottom: 0;
}
.timeline .timeline-heading h4.subheading {
text-transform: none;
}
@ -657,7 +665,7 @@ section h3.section-subheading {
}
.team-member {
margin-bottom: 50px;
margin-bottom: 25px;
text-align: center;
}
@ -667,11 +675,27 @@ section h3.section-subheading {
}
.team-member h4 {
margin-top: 20px;
margin-bottom: 20px;
margin-top: 10px;
margin-bottom: 10px;
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 {
margin-top: 0;
}
@ -692,6 +716,15 @@ section#contact .section-heading {
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 {
color:white;
margin-bottom: 25px;
@ -903,36 +936,15 @@ section h3.section-comment {
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 {
border: 0;
background-color: #fed136;
}
@media (min-width: 740px)
.carousel-inner, .text-carousel .carousel-inner {
min-height: 225px;
@media (min-width: 740px) {
.carousel-inner, .text-carousel .carousel-inner {
min-height: 225px;
}
}
.carousel-text {
@ -943,4 +955,4 @@ logo-image {
lign-heignt: 2px;
color : #666;
text-align : center;
}
}

View File

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

View File

@ -12,16 +12,16 @@
<strong>{{ message }}</strong>
</div>
{% endfor %}
<h2 class="section-heading">{% trans "Contact Us" %}</h2>
<h3 class="intro-smallcap" style="line-height: 1.2;">
<h2 class="section-heading sm_left">{% trans "Contact Us" %}</h2>
<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 "You can contact us at" %}
</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>
</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 "Contact Us" %}</h3> -->

View File

@ -4,27 +4,27 @@
<section id="portfolio" class="bg-light-gray">
<div class="container">
<div class="text-center wow fadeInUp">
<h2 class="section-heading">{% 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>
<h2 class="section-heading sm_left">{% trans "Our Products" %}</h2>
<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 class="row">
<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>
<div class="portfolio-caption inline-block">
<div class="portfolio-caption inline-block sm_left">
<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 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>
<div class="portfolio-caption inline-block">
<div class="portfolio-caption inline-block sm_left">
<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>
</div>
</div>
<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>
<div class="portfolio-caption inline-block">
<div class="portfolio-caption inline-block sm_left">
<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>
</div>

View File

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