Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

Changing size of one banner heading for mobile only


GenuineContent

Question

So I am building a website using the Impact template in the Brine family. I kept much of the original formatting, as it worked well for my client, including the large block header 1 format. However, one of my banner page titles has a word ("recreational") that is too long for the mobile view and getting cut off or wrapped mid-word (I included a screenshot). How do I change the font-size only on this page, and only for the mobile view? I don't want the font-size to change on the full-screen size; and I want the other mobile-view page title font-sizes to remain the same.

Site: Recreational Therapy page

 

864699088_ScreenShot2020-01-11at11_31_41AM.png.0e888c1956c2adf26c759b99c9cb5066.png

Link to comment

Recommended Posts

  • 0
On 5/5/2021 at 2:07 AM, Radhika22 said:

@christyprice @tuanphan Hi! How can I change the height of the header on mobile only? I'm looking to do this for www.jivamorelife.com. It looks good on the web, but it's taking up more of the screen than I want on mobile. Can we reduce padding / the size? 

You mean home top banner? How do you want to solve text/button? 

image.thumb.png.a302f5c7b66c4397e77f6c1463c48717.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
On 5/7/2021 at 3:40 AM, tuanphan said:

You mean home top banner? How do you want to solve text/button? 

image.thumb.png.a302f5c7b66c4397e77f6c1463c48717.png

@tuanphan Yes. I would like to make everything in the header smaller at the top. So that would include the navigation button, Logo, and shop icon.

Link to comment
  • 0
On 5/11/2021 at 4:14 AM, Radhika22 said:

@tuanphan Yes. I would like to make everything in the header smaller at the top. So that would include the navigation button, Logo, and shop icon.

not enough space for both text/button. Do you want to move text/button under image??

image.thumb.png.8a11a009cfe5f9b2eb777d23351278cb.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
On 5/12/2021 at 7:45 PM, kittymittens said:

@tuanphan any chance you can help?

https://www.hogansroaddental.com.au/

Having trouble resizing the banner using all the coding that you've put on here. Any help would be greatly appreciated!

 

 

Hi. Which banner? I don't see on homepage

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
8 hours ago, Radhika22 said:

@tuanphan I meant the header (not the banner), so I'm looking to resize the header for mobile only.

You mean make header height smaller or???

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
7 hours ago, Radhika22 said:

Yes. How can I make the header height of the mobile view smaller?

Add to Design > Custom CSS > then save & reload the site

/* Mobile header */
.Mobile-bar.Mobile-bar--top {
    padding-top: 0px;
    padding-bottom: 0px;
}
a.Mobile-bar-branding {
    padding-top: 0px;
    padding-bottom: 0px;
}
.Mobile-bar-branding-logo {
    width: 70px;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
On 6/11/2021 at 1:31 AM, tuanphan said:

Add to Design > Custom CSS > then save & reload the site


/* Mobile header */
.Mobile-bar.Mobile-bar--top {
    padding-top: 0px;
    padding-bottom: 0px;
}
a.Mobile-bar-branding {
    padding-top: 0px;
    padding-bottom: 0px;
}
.Mobile-bar-branding-logo {
    width: 70px;
}

 

@tuanphan That worked! thank you.

Link to comment
  • 0
Posted (edited)

@tuanphan When I add an Announcement Bar, it doesn't show up on the desktop view, only on the mobile version. Also there is a big space after the Announcement Bar in the mobile version and when you scroll, this bar goes over the header instead of being sticky.

How can I fix these 3 issues? (Images below)

I've also listed all of the custom css code on my website below.

 

image.thumb.png.cfa4f51cb93a980c06e5e5e0c6516735.png

/* Fixed Header */
.Header {
  position: fixed;
  z-index: 9999;
  width: 100%;
  top: 0px;
}
.Content-outer {
  margin-top: 50px;
}

// fixed header navigation for desktop, tablet and mobile //
header, .Mobile {
 width: 100%;
 position: fixed;
 position: -webkit-sticky;
 position: sticky;
 top: 0;
 z-index: 1000;
}
/* Mobile header */
.Mobile-bar.Mobile-bar--top {
    padding-top: 0px;
    padding-bottom: 0px;
}
a.Mobile-bar-branding {
    padding-top: 0px;
    padding-bottom: 0px;
}
.Mobile-bar-branding-logo {
    width: 70px;
}

/* Mobile-Banner side by side */
@media screen and (max-width:767px) {
div#page-60c94c80079fbe716535f7e8 .span-3 {
    width: 50% !important;
    float: left !important;
}
}
/* Mobile-Homepage-2 columns */
@media screen and (max-width:640px) {
section#products-1 .span-3, section#products-2 .span-3 {
    width: 50% !important;
    float: left !important;
}
section#products-1 .span-3:nth-child(2n+1), section#products-2 .span-3:nth-child(2n+1) {
    clear: left !important;
}
}
/* 2 Column Product Grid */
@media only screen and (max-width:640px) {
.products .list-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.products .grid-item {
width: 48%;
}
}

/* 2 products columns - Watercolor splatters */
@media screen and (max-width:640px) {
div#page-5f489bc95b4e2969d5bf026c .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-5f489bc95b4e2969d5bf026c .span-3:nth-child(2n+1) {
    clear: left !important;
}
}
/* product 2 columns mobile */
@media screen and (max-width:640px) {
/* Mini paintings */
div#page-60246570a7841d194bd52219 .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-60246570a7841d194bd52219 .span-3:nth-child(2n+1) {
    clear: left;
}
/* polaroids */
div#page-607a494ab14a497e09cc5385 .span-12 .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-607a494ab14a497e09cc5385 .span-12 .span-3:nth-child(2n+1) {
    clear: left;
}
}
/* Collections page header */
@media screen and (max-width:640px) {
div#block-0af3a012f3c9b4da3f05+.row .span-3 {
    width: 50% !important;
    float: left !important;
}
div#block-0af3a012f3c9b4da3f05+.row .span-3:nth-child(2n+1) {
    clear: left !important;
}
}

image.png

Edited by Radhika22
Link to comment
  • 0
On 7/9/2021 at 6:57 AM, Radhika22 said:

@tuanphan When I add an Announcement Bar, it doesn't show up on the desktop view, only on the mobile version. Also there is a big space after the Announcement Bar in the mobile version and when you scroll, this bar goes over the header instead of being sticky.

How can I fix these 3 issues? (Images below)

I've also listed all of the custom css code on my website below.

 

image.thumb.png.cfa4f51cb93a980c06e5e5e0c6516735.png

/* Fixed Header */
.Header {
  position: fixed;
  z-index: 9999;
  width: 100%;
  top: 0px;
}
.Content-outer {
  margin-top: 50px;
}

// fixed header navigation for desktop, tablet and mobile //
header, .Mobile {
 width: 100%;
 position: fixed;
 position: -webkit-sticky;
 position: sticky;
 top: 0;
 z-index: 1000;
}
/* Mobile header */
.Mobile-bar.Mobile-bar--top {
    padding-top: 0px;
    padding-bottom: 0px;
}
a.Mobile-bar-branding {
    padding-top: 0px;
    padding-bottom: 0px;
}
.Mobile-bar-branding-logo {
    width: 70px;
}

/* Mobile-Banner side by side */
@media screen and (max-width:767px) {
div#page-60c94c80079fbe716535f7e8 .span-3 {
    width: 50% !important;
    float: left !important;
}
}
/* Mobile-Homepage-2 columns */
@media screen and (max-width:640px) {
section#products-1 .span-3, section#products-2 .span-3 {
    width: 50% !important;
    float: left !important;
}
section#products-1 .span-3:nth-child(2n+1), section#products-2 .span-3:nth-child(2n+1) {
    clear: left !important;
}
}
/* 2 Column Product Grid */
@media only screen and (max-width:640px) {
.products .list-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.products .grid-item {
width: 48%;
}
}

/* 2 products columns - Watercolor splatters */
@media screen and (max-width:640px) {
div#page-5f489bc95b4e2969d5bf026c .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-5f489bc95b4e2969d5bf026c .span-3:nth-child(2n+1) {
    clear: left !important;
}
}
/* product 2 columns mobile */
@media screen and (max-width:640px) {
/* Mini paintings */
div#page-60246570a7841d194bd52219 .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-60246570a7841d194bd52219 .span-3:nth-child(2n+1) {
    clear: left;
}
/* polaroids */
div#page-607a494ab14a497e09cc5385 .span-12 .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-607a494ab14a497e09cc5385 .span-12 .span-3:nth-child(2n+1) {
    clear: left;
}
}
/* Collections page header */
@media screen and (max-width:640px) {
div#block-0af3a012f3c9b4da3f05+.row .span-3 {
    width: 50% !important;
    float: left !important;
}
div#block-0af3a012f3c9b4da3f05+.row .span-3:nth-child(2n+1) {
    clear: left !important;
}
}

image.png

Add to Desisgn > Custom CSS

@media screen and (max-width:767px) {
.Content-outer {
    margin-top: 0px;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
On 7/9/2021 at 9:10 PM, tuanphan said:

Add to Desisgn > Custom CSS

@media screen and (max-width:767px) {
.Content-outer {
    margin-top: 0px;
}
}

 

@tuanphan Thanks! That fixed it on mobile, but it did not fix it on the desktop where you still can't see it.

How can I see this banner on desktop?

Also, how can I make this banner sticky so it always shows?

Link to comment
  • 0
4 hours ago, Radhika22 said:

@tuanphan Thanks! That fixed it on mobile, but it did not fix it on the desktop where you still can't see it.

How can I see this banner on desktop?

Also, how can I make this banner sticky so it always shows?

I don't see banner. Did you remove it?

https://www.hogansroaddental.com.au/

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
On 7/21/2021 at 12:35 AM, Radhika22 said:

The Announcement Bar banner only shows up on mobile, not on desktop versions. Plus, on the mobile version, it is not sticky.

https://www.jivamorelife.com/

You mean sticky both header + annoucenement bar on mobile?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
16 hours ago, Radhika22 said:

Yes.

Also, why is it not showing on desktop?

It is appear, but your header overlap it.

On desktop, you want announcement bar appear above or below header?

Add to Design > Custom CSS

/* sticky announcement bar mobile tablet */
@media screen and (max-width:900px) {
.sqs-announcement-bar-dropzone {
    position: fixed;
    top: 55px;
    z-index: 999;
    left: 0;
    width: 100%;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
On 7/22/2021 at 11:40 PM, tuanphan said:
/* sticky announcement bar mobile tablet */
@media screen and (max-width:900px) {
.sqs-announcement-bar-dropzone {
    position: fixed;
    top: 55px;
    z-index: 999;
    left: 0;
    width: 100%;
}
}

Now the announcement bar is sticky on mobile (thank you!), but it is cut off in tablet view, and does not show up on the desktop version.

I want the announcement bar below the header.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...