QA/Best Practices For AppDev

[vocotrans]

Hi,

I was looking for assistance in regards to best practices to 3 modifications to the AppDev theme.

1) Centering Banner Logo

We are using the ‘single static page’ that removes the page links from the header (leaving just the logo). How would we center the logo?

2) Centering The Footer Menu

We are using the ‘single static page’ that adds page links to the footer (leaving just the logo). How would we center the footer?

3) Page Section Height

Is there a best practice in order to minimize the height of the page sections on an absolute basis?

[Veena]

1. You can use the below custom CSS in themeoptions –

#site-logo {
    position: relative;
    display: block;
    float: none;
    text-align: center;
    margin: 0 auto;
}
#site-logo a, #sticky-site-logo a {
    display: inline-block;
    }
#header.sticky #site-logo{
    float: none;
    display: block;
}

2.Can you pls share a link to the site?
3.You can minimize the pagesection height by adjusting the segment padding.Currently it is 70px, try the below custom CSS –

.segment {
    padding: 20px 0;
}

[vocotrans]

Hi.

2) http://www.aluviapp.com

[Veena]

1. Instead of this CSS –

#header.sticky #site-logo{
    float: none;
    display: block;
}

pls add it like below-

#header.sticky #site-logo {
    float: none !important;
    display: block !important;
}

2.Pls use the below custom CSS –

#menu-footer {
    text-align: center;
}
#footer-bottom-text {
    display: block;
    margin: 0 auto;
    text-align: center;
    float: none;
}

[vocotrans]

Hi,

Another question below.

Looking to scale down the height of #slogan image (top and bottom).

Would this be correct css?

#slogan {
height: 50%;
}

[Veena]

Pls share a link to the specific pagesection.

[vocotrans]

Hi,

AluviApp.Com

1) Decreasing the height of the background image (not padding or margin)

2) Disabling of hamburger menu on web and mobile (or all menus)

3) Does the theme come with different iPhone designs for the image gallery? (flat designed iPhone). If not, how do you change the iPhone design?

4) Move social icons from the top right to the footer

[vocotrans]

Also;

5) Stacking the footer menu vertical instead of horizontal

6) Any way to increase text size on mobile by a % or fixed ratio?

[vocotrans]

Hi,

It seems as the edit function was disabled or I’d edit a previous post. Apologize for the all the questions; hence I summarized them here:

http://www.AluviApp.com

1) Does the theme come with different iPhone designs for the image gallery? (flat designed iphone). If not, how do you change the iPhone design?
2) Disabling of hamburger menu on mobile, tablet, and web
3) Decreasing the height of the background image on the homepage (not padding or margin)
4) The logo image (header) is not appearing on mobile devices or tablets
5) Moving social icons from header to footer
6) Stacking the footer menu vertical instead of horizontal on mobile
Instead of: Page #1 | Page #2 | Page #3
Change to:
Page #1
Page #2
Page #3
7) Changing the header color of pages
8) Decrease margins/padding between page sections
9) Move the columns of text into a more precise format for mobile. This would consist of having the iPhone slider as the first content viewed verse column 1.

Thank you,
W

[Veena]

2.Pls use the below custom CSS in themeoptions –

#mobile-menu-toggle {
    display: none !important;
}

3.You can include the below background size in the segment shortcode –

background-size: 100% 80%;

And also use the below custom CSS in themeoptions –

#features .segment {
    top: -50px;
}

4.Pls set retina site logo image in Themeoptions > Site logo tab and also specify the width and height for the same.

[Veena]

5. Pls go to “widgets” and drag social networks widget to Footer area and save it.
6.

#menu-footer ul li {
    display: block;
}

7. You can find options to change the same in page edit window.

8.

#home-alternate.segment {
    padding: 40px 0;
}

Negative values will not work for padding.

[Raghavendra]

Does the theme come with different iPhone designs for the image gallery? (flat designed iphone). If not, how do you change the iPhone design?

You can change it by replacing the image in the folder images/sliders/iphone-slider-stage.png with your own. Plenty of images available online. Once you replace with your own, you can change or adjust the images to fit the iPhone image. The newer iPhones may require you to provide a larger screenshot. You can also have a look at our later themes Fusion and Agile and see how we do it and find some new iPhones too. You may need to adjust this particular CSS –

.iphone-slider-container .flex-slider-container {
    top: 19%;
    left: 14%;
    width: 71.8%;
    height: 65%;
}

[vocotrans]

Hi,

Thank you for the info.

#4) I changed the pixel heigh/width, yet the logo on mobile is still not showing. Is there any way to QA this?

#6) Is there custom css that is theme specific to the @media inquiry in regards to having the footer horizontal on web, but vertical on mobile? (also removing the ” | ” character on mobile?)

[Veena]

4. It is visible, Hope you have managed.

5.For mobile you need to modify the custom CSS like below –

@media only screen and (max-width: 767px){
#menu-footer ul li {
    display: block;
}
#menu-footer ul li:before {
display:none;
}
}

[Author]

Posts