Topic: Questions re. mobile layout « SeaTheme

This topic has 7 replies, 2 voices, and was last updated 5 years, 6 months ago by ellent.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
November 5, 2020 at 5:23 pm #22939

ellent
Participant

Purchased
Expired

Hi there,

Was hoping you can help me with the following. My site: https://www.gunforhire.agency/

1. Really happy with the homepage on desktop, but it doesn’t work (3rd party slider) on mobile. Is it possible to set a different homepage for mobile than for desktop? Or any other thoughts on how I can work around this?

2. Is it possible to adjust the layout of the pages just for mobile and leave them as they are on desktop? For example, this page: https://www.gunforhire.agency/sergio-herman-x-jfk-magazine/. I’d like to set the accompanying text on top of the page on mobile, but leave it fixed right of the image on desktop.

3.The header on mobile. I’d like it to stick on the top of the page, but I don’t want it to be transparent. I’d like the background of the header bar to remain white so when you scroll down the images, the logo doesn’t appear transparent over the images. Is this possible?

Many thanks for thinking along!

Ellen

WordPress Customization Service from $49 Only! Save your expensive time!

November 6, 2020 at 2:22 am #22940
SeaTheme
Keymaster

Purchased
Expired
Hi,

1.
It is not possible to show a different homepage for mobile than for desktop by theme. It may be possible by other solutions like a 3rd plugin.

There are options for the Group: Hide for mobile and Hide for desktop. You could put the slider module into a Group, activate “Hide for mobile”.

2. It is possible by custom CSS(“Appearance > Customize: Additional CSS”), like:
```
@media(max-width:767px){
 .page-id-480 .bm-row,
 .page-id-481 .bm-row,
 .page-id-482 .bm-row { display: flex; flex-direction: column; }
  #right-fixed { order: -1; margin-top: 100px; }
}
```
The CSS will let the Text on the top of the page. You should add more page id. I think there are many pages for this layout, are they? I don’t know what are pages with this fixed-right-text. The 480 is the page ID of sergio-herman-x-jfk-magazine. The 481 and 482 are for showing how to add the page ID.
How to find page id: https://doc.seatheme.net/wordpress-faqs/custom/how-to-find-wordpress-post-page-id/

3. Please paste the custom CSS code to “Appearance > Customize: Additional CSS”:
```
@media(max-width:767px){
 .non_bg_header #header  { background-color: #fff!important; }
}
```
Regards!

SeaTheme – SeaTheme.net – Twitter – Facebook
WordPress Customization Service from $49 Only! Save your expensive time!

November 15, 2020 at 9:14 pm #23031

ellent
Participant

Purchased
Expired

Thank you so much for your help! So close to having the site ready 🙂

I’m now working with groups and the ‘hide on desktop/mobile’ function to make sure the layout works on both desktop and mobile. However, for some reason the text block (in a group) is causing a surplus of space at the top of the page on mobile layout. I’m finetuning this page, and once I have it sorted I plan to copy that layout to all other pages: https://www.gunforhire.agency/replay-casio/

Could you please have a look at this page on mobile and advise me on how to place the image grid immediately under the top text (name photographer) ?

Once again, many thanks 🙂

WordPress Customization Service from $49 Only! Save your expensive time!

November 16, 2020 at 2:49 am #23034

SeaTheme
Keymaster

Purchased
Expired

Hi, welcome!

Please check the right-fixed Group, the Height is 100% now, please reduce it.

Regards!

WordPress Customization Service from $49 Only! Save your expensive time!

November 16, 2020 at 8:05 am #23035

ellent
Participant

Purchased
Expired

Yay! That works perfect. Thanks!

WordPress Customization Service from $49 Only! Save your expensive time!

November 19, 2020 at 5:01 pm #23050

ellent
Participant

Purchased
Expired

Hello, me again… hoping you can help with another couple of questions.

I’ve added a couple of hyperlinks in the text block on this page: https://www.gunforhire.agency/replay-casio/ but none of them appear to be ‘clickable’ on desktop (there are hyperlinks underneath the little arrows). It does work on mobile, only an issue on desktop and I don’t understand why… do you have any idea?

Also, the site now looks good on my mobile (iPhone) however, on my friends Samsung mobile the site appears with a dark backrground even though he hasn’t set his phone on ‘dark mode’. Do you know why this is happening?

Thank you again for your help 🙂

Cheers,
Ellen

WordPress Customization Service from $49 Only! Save your expensive time!

November 20, 2020 at 1:39 am #23053
SeaTheme
Keymaster

Purchased
Expired
Hi,

The header bar is covered on the text, so it can not be clicked.
Please add the custom CSS to fix it:
```
@media (min-width: 768px) {
.header-main {
    height: 0;
}
.navi-hide .navi-trigger-out { 
    margin-top: 200px;
}
.navi-logo { 
    margin-top: 180px;
 }
}
```
I tested your website on an Android phone, the background is not dark, it is white, the same as the iPhone. Is there a special option set on your friend’s Samsung phone? Please prove it by visiting https://www.google.com/ to check what’s the BG color on Google.
If the Google is white, please send me the phone model and system model (preferably with a screenshot of the problem page)

Regards
WordPress Customization Service from $49 Only! Save your expensive time!

November 20, 2020 at 4:46 pm #23055

ellent
Participant

Purchased
Expired

Thank you! That piece of CSS coding solved the hyperlink issue and my friend checked again… his phone setting actually was set on ‘dark / night mode’ so that is solved as well 🙂

Cheers,
Ellen

WordPress Customization Service from $49 Only! Save your expensive time!
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.