Banner on Mobile

  • Resolved kristenbeeler

    (@kristenbeeler)


    9 years, 1 month ago

    Hi! I recently created my Senses Lite site with my own picture Banner and Text in the Center of the Banner. It works great on the computer, but when I go to mobile the banner does not have my Logo Text in the center unless I flip the screen to the rotation view. Any ideas on how to have this show up on Mobile without having to rotate the screen?

    Also when you update the mobile color app changes you mentioned in the previous post will the template automatically update to be able to edit?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Theme Author Shaped Pixels

    (@shaped-pixels)

    If you are able to provide a link, I can take a look and see what is happening.

    Regarding the mobile menu changes, when you update the theme, you will get the colour options show up in the customizer for the mobile menu, plus the other items I also updated.

    Thread Starter kristenbeeler

    (@kristenbeeler)

    my link is https://www.mykindofhealthy.com

    thank you!

    Theme Author Shaped Pixels

    (@shaped-pixels)

    Thanks for the link…OK, basically as the window gets small, usually down to the portrait view on a phone, the caption box is hidden because I thought it would be too small to read anything in the box. The styling for this is:

    @media (min-width: 320px) {
	.banner-caption {
		display: none;
	}
}
@media (max-width: 480px) {
	.gallery .gallery-caption {
		display: none;
	}
}

    I wasn’t sure if I would hide it on a 480px screen or smaller, so the “display: none;” is implemented. You can override this with custom CSS if you wish by changing the display:none to be:

    @media (min-width: 320px) {
	.banner-caption {
		display: none;
	}
}
@media (max-width: 480px) {
	.gallery .gallery-caption {
		display: block;
	}
}

    The above example will hide it on 480 but still hide it on 320, but you can do display: block; on the 320 view as well if you want.

    On a side note, nicely done with the theme by removing the site title, etc and just keeping the menu at the top.

    Thread Starter kristenbeeler

    (@kristenbeeler)

    Thank you so much for this coding and for the feedback on the site!

    I am still new to using this, so I apologize for this question…

    but how do I customize the CSS without messing everything up? I know where to get to the CSS and how to open it, but have been hesitant to mess with it.

    When I copied the code in the CSS that you provided it removed the block from the website and mobile.

    Theme Author Shaped Pixels

    (@shaped-pixels)

    No worries about being new to all of this and no need to apologize.

    To edit CSS without touching the theme’s own files, you can install a plugin called Simple Custom CSS. This lets you create your own stylesheet where you can make changes to the theme.

    But to recap, if you want your caption box to show in phones (small screens), you will copy and paste this into your new stylesheet:

    @media (min-width: 320px) {
	.banner-caption {
		display: block;
	}
}

    Thread Starter kristenbeeler

    (@kristenbeeler)

    It worked!!! Oh I’m so happy, thank you so much for all of your help today. Happy Friday!

    Theme Author Shaped Pixels

    (@shaped-pixels)

    Good to hear and you’re very welcome ??

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Banner on Mobile’ is closed to new replies.