Mobile versions need a LOT of help

I have several issues with mobile versions of my website, if you look at them, they will stand out pretty obviously but I will list some here.
The biggest issue I have is this:
in standard viewing (computer) I have 3 services on my home page. They are separated into 1/3 of the page. You can see this by going to eppicmedia.com. I want them to stay this way in standard display, this is super important. BUT…
when I switch to mobile (either version) I want them to switch from 3 vertical to 3 horizontal. I ONLY want this to happen in mobile versions, I do not want this to happen in the standard view. This will make it more readable for viewers.

Also on the mobile versions, I have 5 images in the Header Slider. I did some editing to get the text where I want it on the page, and it looks fantastic in standard view, however when I switch to mobile view, it doesn’t resize to fit the new viewing space, and the letters end up on top of each other. PLEASE view my website in mobile to see, for example on the first slider image the text reads “Your life, in the spotlight”. Look at that text in standard view, then look at what it does when you switch to mobile view. I want the code to change all of the slider image text.

The code that I am currently using on this text is as follows:

.slide-inner{
  top: auto;
  bottom: 12%;  
  -webkit-transform: translateY(12%);
  -moz-transform: translateY(12%);
  -ms-transform: translateY(12%);
  -o-transform: translateY(12%);
  transform: translateY(12%);
}

If you have a suggestion on what to add to this text let me know.

Thank you so much for your assistance.

Hello @eppicmedia,

I’m not sure what exactly is your first issue, can you please explain it more precisely?

As for your second issue, you can try to wrap your code in media query to apply it only on desktop resolutions.

Kind Regards, Roman.

Thank you Roman,

Did you look at the page in both Desktop view and then in mobile view? When you go down the page to where the 3 services are (Sports, Concert, Travel) they are listed in a horizontal fashion. Sports is left, Concert is middle, Travel is right. This works perfectly for desktop view and I want it to remain that way in desktop view.
When you change to mobile view it does not work at all, in mobile view it makes each service one to two words wide and they become very tall and impossible to read. I want it to instead switch from horizontal to vertical. To be more specific, I want it to switch (in mobile view ONLY) to Sports photography on top, Concert in the middle, and then Travel on the bottom. This will give more room for the text of each service.
I am assuming that much like part two, we will need to make code that will query ONLY in mobile viewing of the site?

As far as part 2 I do not understand how I would wrap code in media query. I have minimal coding experience.

Hello @eppicmedia,

  1. Looks like you have this custom CSS rule:
.widget_sydney_services_type_a .service.col-md-4{
  width: 33.33333333% !important;
  float: left !important;
  padding-left: 3.5% !important;
  padding-right: 3.5% !important;
}

Please try to remove width: 33.33333333% !important; from it to fix first issue.

  1. You can wrap that code in media query to apply it on 768px of width and more like this:
@media only screen and (min-width: 768px) {
    .slide-inner{
        top: auto;
        bottom: 12%;  
        -webkit-transform: translateY(12%);
        -moz-transform: translateY(12%);
        -ms-transform: translateY(12%);
        -o-transform: translateY(12%);
        transform: translateY(12%);
    }
}

Kind Regards, Roman.

WOOHOO!
That worked perfectly!

I am messing around with this code now:

@media only screen and (min-width: 768px) {
.text-slider .subtitle {
font-size: 45px !important;
}

@media only screen and (max-width: 767px) {
.text-slider .subtitle {
font-size: 30px !important;
}

It works for the desktop view, but for the other views the subtitle text goes REALLY small now, and no matter what font size I put in, it does not change. I am looking for any other subtitle text code I may have put in anywhere but I am not finding it, if you have any ideas on this part (part 2) I would appreciate it, but thank you SO much for the answer on part one, I am very happy now.

HA! I got it, I forgot to put a “}” to end my code on the first font adjustment!!!

This does raise a new question, I will put it here, but I can start a new thread too. NOW when I scroll down everything looks good until I hit “Meet the Photographer” and for some reason Photographer isn’t centering…I would like to make sure it is centered on all views, but also wrap code so that on mobile views font size goes down a touch to make it more pleasing to the eye.
I think it looks funny and wrapping the code to make the text smaller will indeed help.
Once again thank you so much!

Hello @eppicmedia,

I will be glad to help you, but can you please provide some explanatory screenshots?

You can upload screenshots to your WordPress Media Library and share a link, or you can use one of the online screenshot services.

Kind Regards, Roman.

Ok here is more information:
The location of the text is:
Homepage:
Layout Builder:
Text:
Title
I put Meet the photographer in the title, and left the content blank. I then added the button. I have another thread open where I am trying to remove the padding so the button is closer to the Title text (maybe you can help with that as well and I can close both threads)

Here is an image for reference:
http://eppicmedia.com/wp-content/uploads/2016-10-04.png

you can see that it says PHOTOGRAP and then half of the H is missing as well as ER.

I want the font size to shrink until it fits in the mobile viewing, is there a way to make the font a % of the original size when switching, or do I need to make the font a static 15px for example? I do not mind that it stacks the text into two lines, I actually wish I could do that on the main desktop view as well.

Please advise!

Hello @eppicmedia,

Please try to use the following CSS code.

@media only screen and (max-width: 479px) {
    div#panel-w57f3bebb4d165-0-0-0 > h3.widget-title {
        font-size: 24px;
    }
}

Kind Regards, Roman.

Cool, this works on the homepage is there a way to make it work on other pages? I think the ones that i am worried about are all H3 font size so instead of just the h3 in that particular widget it does h3 sitewide.

I cleared my image cache, and it appears to be working now. Thank you, i will keep my eye on it!

Ok I was wrong, i need to figure out how to make it work with all H3 text, sitewide. Thanks.

Hello @eppicmedia,

Please try to use this CSS code instead of previous:

@media only screen and (max-width: 479px) {
    h3.widget-title {
        font-size: 24px;
    }
}

It should affect all H3 elements with widget-title class, sitewide.

Kind Regards, Roman.

Seems to work perfectly, thank you much!

You are welcome @eppicmedia!

Kind Regards, Roman.