Responsive Issues

[jioerger]

Hi – I recently purchased and installed the theme for http://www.beautyforashesmusic.com. I’ve run into a few issues that I need assistance resolving.

1) When the theme goes to portrait on a mobile device (iphone), the custom logo dissapears and the search and menu icon are missing. In landscape on the mobile, the logo reappears, but the icons are still missing, but you can click blindly on the top bar and activate them. How can I fix this?

2) in Responsive, the MENU and SEARCH boxes are still displaying lovoblack as the typeface despite trying everything to remove that. The google font selector built into the theme is displaying Alice and Open Sans, but there were many instances of the default typeface still appearing, which I changed manually in the CSS using search and replace, but I just can’t seem to find those last two instances.

3) The header image for News is not scaling in responsive mode.

4) The gallery image thumbnails and images are not scaling correctly in responsive mode.

5) I want to change the color for the submit button on the mailchimp plugin at the bottom of the homepage, but I can’t locate this either.

Thanks in advance for your assistance!
Jillian

[FocuxTheme Support]

Hi

1. In portrait mode, the screen space is not enough to display the LOGO, that’s why I hide it. For the icons missing, I found you have modified layout.css, right?
Look at this code

.tools ul li.menu a {
background-image: url(../../images/site_icons/menu-light.png);
}

The image path is incorrect, it should be ../images/site_icons/menu-light.png

2. The MENU and SEARCH boxes? Did you mean when you click them, the text font in the slide down layout? I found the font has already changed.

3. Is this image you meant? https://www.dropbox.com/s/x7kr89rrrrdwokv/newsheader.jpg

4. Looks it’s fine, https://www.dropbox.com/s/oizagk5uu7mqjfw/gallery-scaled.jpg Am I missing anything?

5. Try to add the following CSS to Samsara options > Custom style > CSS code

.subscribe-text input[type="submit"]{background-color:#000;}

You can change it to the other color.

Thanks

[jioerger]

Thank you for your speedy response. It’s much appreciated!

1. I understand that you feel the logo won’t work in portrait mode, but I need for it to display regardless. How can I set it to display?

3. No, it’s the actual header images at the top of the NEWS, TOURING, MERCH, GALLERY and BIO pages. See photos below.

http://www.beautyforashesmusic.com/wp-content/uploads/2014/07/Screen-Shot-2014-07-10-at-2.22.09-PM.png
http://www.beautyforashesmusic.com/wp-content/uploads/2014/07/Screen-Shot-2014-07-10-at-2.22.28-PM.png
http://www.beautyforashesmusic.com/wp-content/uploads/2014/07/Screen-Shot-2014-07-10-at-2.22.42-PM.png
http://www.beautyforashesmusic.com/wp-content/uploads/2014/07/Screen-Shot-2014-07-10-at-2.23.40-PM.png
http://www.beautyforashesmusic.com/wp-content/uploads/2014/07/Screen-Shot-2014-07-10-at-2.23.53-PM.png

I need for these to scale to the screen size when in responsive mode, not zoom as they are doing now. If this isn’t possible, is there a way to hide header images in responsive mode?

4. When you actually click on a gallery in responsive mode, the thumbnails are all messed up. If you try clicking through, the gallery isn’t useable. If there isn’t an easy way to fix this, is there a way to hide the gallery / portfolio section completely in responsive mode? See below for an image.

http://www.beautyforashesmusic.com/wp-content/uploads/2014/07/Screen-Shot-2014-07-10-at-2.23.00-PM.png

5. I’ve tried using that code, however it isn’t changing the input box color. I’ve also tried to change the H2 and p for the subscribe text, but the only one that is working is the p. I have this placed in the custom.css file. If it needs to be placed somewhere else, please let me know.

.subscribe-text input[type=”submit”]{background-color:#c00007;} (not working)

.subscribe-text h2 {font-size: 28px; color: #ffffff;} (not working)

.subscribe-text p {font-size: 14px; color: #ffffff;} (working – go figure…)

Thanks in advance!

[FocuxTheme Support]

1. If you add the following CSS into Samsara options > Custom styles > CSS code, the LOGO will be back in portrait mode, but you may need to adjust something after you do that, but it’s a customization issue that is not included in the support.

@media only screen and (max-width: 479px) {
       h1#logo{   display:block;  }	
}

3. I found the header image in my demo site is working fine http://demo.themevan.com/samsara/shop/ but in your site, the image will not resized. I’m not sure you have modified original CSS file or not ?

4. I see you have inserted a default gallery into the portfolio content which is the wordpress built-in gallery. Yes, it’s not responsive. Maybe you have use some plugin to improve it, for example https://wordpress.org/plugins/responsive-gallery-grid/

5. I suggest you can put the first two lines into Samsara options > Custom style > CSS code

.subscribe-text input[type="submit"]{background-color:#c00007;}

.subscribe-text h2 {font-size: 28px; color: #ffffff;} 

Thanks

[welchbyu]

I too am having issues with this. In mobile portrait mode it is cutting off my logo. The custom css does not seem to work. Please have a look. Drohome.com.

Thanks,

Casey

[FocuxTheme Support]

Hi

Try the following custom CSS

@media only screen and (max-width: 767px) {
       h1#logo a{   display:block; width:200px; } 
}

[welchbyu]

Is there a way to get around the no logo on the mobile portrait mode? It’s very confusing if someone visits the site on their mobile, holding it normally, and they don’t even know where they are. Also on Android (granted an older android) the navigation bar is not even coming up at all. It just has small words that say “menu” and “search” but aren’t clickable.

Lastly, on mobile portrait and landscape, the quote element option is getting cut off. Any solution to this?

Thanks,
Casey

[FocuxTheme Support]

1. For LOGO issue, yes, there’s no LOGO in the very small screen in currently, you may need to add some custom CSS like below (Just a general idea)

@media only screen and (max-width: 479px){
  h1#logo{display:block;}
  h1#logo a{width:150px;background-size:150px auto;}
  .tools{margin-right:0;}
  .tools ul li, .tools ul li.menu{width:35px;margin-left:2px;}
}

2. For old Android issues, can you tell me more details? For example, what’s browser you used? What’s the version of the android? The screen size? Because I don’t have the old android now, so I think I must to find one and test it.

3. For quote issue, please try to add the following css into samsara options > custom styles > css code:

@media only screen and (max-width: 767px){
   .van_quote.container .ten.columns{width:100%;}
}

[welchbyu]

Hello again!

So after adding more pages to our menu/navigation bar it is now crowding and overlapping over the logo even though it seems there is enough room. Is there a way to fix this?

Thanks!

Casey

[FocuxTheme Support]

Hi

I’m not quite understand, because it looks fine now, can you show me a screenshot?
Generally speaking, if there’s no enough space for the menu items, there are two ways.

1. Reduce the font size of menu text or the space between the items.
2. Remove some items which is not neccessary.

Thanks

[welchbyu]

Sorry to not be clear, it looks fine on bigger screens, but once the screen is smaller it starts overlapping like crazy. How do I reduce the font size or space in-between the tabs exactly?

Casey

[FocuxTheme Support]

Hi

Have you upgraded your theme to the lateset version?

Thanks

[aspaceforsound]

I am having terrible issues with the responsiveness (on all devices) of a client’s site with this theme:
•The Pictures on the Front Page Slider are not resizing on mobile devices
•Items are not showing up at all (there is now a huge grey box where a resume used to be)
•Portfolio won’t appear at all (on Desktop & Mobile)

SITE: http://quincychad.com/
Please help in this ASAP would be greatly appreciated, as I am now dealing with a very upset client.

[FocuxTheme Support]

Hi, @aspaceforsound

1. The slider picture issue on mobile devices is related with your settings in “Revolution slider”, you should set the slider to “Responsive”. Generally, the slider is not the part of the theme, so in most cases, you should find the reason in the plugin (Slider) setting.

2. Could you post a screenshot for the question page? I’m not quite understand.

3. I guess your settings in backend is wrong. You should add portfolio posts via “Portfolios > Add portfolio” with featured image, then, create a new page with portfolio archive page template, please note, don’t use “portfolio” to be the page slug.

If you still can’t manage to set it up, please post your wordpress login details with private reply.

Thanks

[aspaceforsound]

Thank you for getting back to me so quickly; I appreciate it!

Your answers to Questions 1 & 3, worked; thank you!!
•Is there a way to have the Welcome Slider be Full Screen for the Desktop Website & Responsive for the Mobile Site?

•What is the ideal size for images in the Revolution Slider (in Landscape & Portrait)?
Previously, I used the settings from the demo for “Creative” which is why I set the slider to Full Screen.

Question 2: I embedded a Pdf, and just realized that it is still linked to my local site uploads…ohhh man; MY FAULT, not yours!!

[FocuxTheme Support]

Q: “Is there a way to have the Welcome Slider be Full Screen for the Desktop Website & Responsive for the Mobile Site?”
A: This is my demo slider setting, it’s fullscreen and responsive, you can refer to https://www.dropbox.com/s/syks55dq8riyld2/rev_setting.png?dl=0

———

Q: “What is the ideal size for images in the Revolution Slider (in Landscape & Portrait)? Previously, I used the settings from the demo for “Creative” which is why I set the slider to Full Screen”
A: No ideal size, if you want it to fullscreen, more than 1600×1200. I’m not sure why you set it to fullscreen, but it will not responsive, refer to the previous screenshot I posted above, is it same as your setting?

[Author]

Posts