Issues with mobile responsiveness in OnePress theme

  • Resolved paksj

    (@paksj)


    3 years, 2 months ago

    Need help with css for mobile responsiveness. Screenshots at https://imgur.com/a/cNrHcYs

    1) Header- I want the logo to appear fully on the screen, width same as header, hamburger menu to shift to the right. Currently, if you click on the menu, it doesn’t show the display below fully. Also, overall header width to reduce a bit, say by 10-15%.
    2) There is space after the footer on the screen of some devices, not all.
    3) In the second section (let’s work together), I need space before the second photo. I also want the font to be smaller in this section & the text to be justified.
    4) On the iPad, the gallery’s last row should be centre aligned
    5) On iPad Pro, Pixel & some large phones, the first section with revolving text shows as too small. Need to increase font size
    6) On Surface Duo, in one section (investment philosophy), the pictures need to be centre aligned.
    7) On Galaxy Fold, the header appears as two lines (need one). And one section, one word comes in two lines. Need to reduce font.

    What I’ve tried (has not worked):

    @media screen and (max-width: 767px) {
  	.site-branding { max-width: 10% !important; }
	.site-header { max-width: 30% !important;
	max-height: 60% !important}
.section-features .feature-item .feature-item-content {
        text-align: justify !important;
	 font-size: 0.6rem !important;
	}
}

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Theme Author FameThemes

    (@famethemes)

    Hi,

    1. You can use the option Retina Logo in Customizer > Site Identity, to upload another logo. The retina logo will display in the mobile/tablet view.

    2. I do not see the space after the footer on your site when accessing with my mobile.

    3. The CSS code to justify the feature item text should be

    @media screen and (max-width: 767px) {
    .section-features .feature-item .feature-item-content p {
        text-align: justify !important;
	font-size: 0.6rem !important;
    }
}

    You might need to use the true selector to style the elements.

Viewing 1 replies (of 1 total)
  • The topic ‘Issues with mobile responsiveness in OnePress theme’ is closed to new replies.