[SuperParticipant]

Hi there. I wanted to get some help on the following questions regarding my site.

As you can see, the mobile layout is very different that on a desktop.
I am viewing on an iphone 5s

1) the mobile hamburger menu at the top is mis-aligned and overlapping the slider.
It should be directly under the logo, or on the right of the logo with a thinner nav bar.

2) the second section on the home page where it says WHAT’S ON is very big text and shouldnt be on two lines. Why doesn’t the text resize to stay on 1 line?

3) the quote text where it says “Food was impeccable, ambience was spot on, and the service was warm and friendly.” isn’t in the correct font Oswald that shows up on the desktop. It’s also very big and doesn’t resize for mobile

4) the email address further down the page is misaligned and runs off the right of the screen on mobile.

[SuperParticipant]

This reply has been marked as private.

[RupokMember]

Hi there,

Thanks for writing in!

#1 & #2. I am seeing this right on my end – http://prntscr.com/aitg8q

If you are testing with very smaller screen then you can use this (doing same for the “What’s On” text) :

@media only screen and (max-width: 359px) {
.x-brand img {
  width: 215px;
}

#x-section-2 .h-custom-headline {
  font-size: 250%;
}
}

#3. I can see you have set a different font for this and it’s same for desktop and mobile – http://prntscr.com/aithdf

You have set a font-size so it shouldn’t be scaled. If you want to resize the font size for mobile, you can use the media query like above example.

#4. It’s a very long text and there is not enough space for smaller mobile screen. You can set a class to the anchor and resize the font size with media query same as stated above.

Hope this makes sense.

Cheers!

[SuperParticipant]

This reply has been marked as private.

[RupokMember]

Hi there,

Thanks for writing back.

#1. The code won’t affect the desktop view. However I can see the desktop view right. Make sure to clear your browser’s cache.

#2. You can update the code to following to avoid issue on other pages :

@media only screen and (max-width: 359px) {
.x-brand img {
  width: 215px;
}

.home #x-section-2 .h-custom-headline {
  font-size: 250%;
}
}

#3. I can see the Great Vibe font on desktop and mobile as the screenshot illustrates. I am not sure what you are expecting here.

#4. It seems you have added the codes on Text element so certainly you can add a class name :

<a class="footer-email" target="_top" href="mailto:info@theemporiumparramatta.com.au?Subject=Website Enquiry">Email us here</a>

Then add the below CSS :

@media only screen and (max-width: 359px) {
.footer-email {
  font-size: 13px;
}

}

Hope this makes sense.

Cheers!

[SuperParticipant]

This reply has been marked as private.

[LelyModerator]

Hi There,

2.) To control the text size for each custom headline, please use responsive text. Create responsive text on Settings > Tab > Responsive Text. For example, your selector is .custom-headline, add custom-headline without the period on the class field of custom headline element. Please do note that px is not needed when you add the MAX and MIN size of responsive text. The text is overlapping with the image on top of it because you have negative value for the GAP element. Please remove it or use positive value. Did you add the GAP element with negative value just to remove the vertical space between the image and custom headline? If yes, please just remove it. We can remove that space by adding mbn on the class field of the image and also add mtn on the class field of the custom headline. This will remove bottom margin of the image and also the default top margin for the headline.

You may check this link for other helper classes:https://community.theme.co/kb/css-class-index/
Responsive text will control the size of the headline per screen size.

Hope this help.

[SuperParticipant]

This reply has been marked as private.

[SuperParticipant]

This reply has been marked as private.

[JadeModerator]

Hi there,

The “What’s on” heading texts appear to be the same as the other heading texts on the page. Would you mind trying to clear your browser cache and see if it fixes the issue?

Thank you.

[Author]

Posts