Dawn Theme - Desktop version vs mobile version

Store Design
1

Hi all,

Okay, so I love my desktop version. Its simple. Its clean. Its easy to navigate. I will likely add more to my homepage eventually, but for now, I like it just the way it is. However, the mobile version, not so much!

I have two complaints on the mobile version. So I am hoping someone within the community would be able to assist me.

  1. The image banner. LOVE it on the desktop. But not so much on a mobile version. I have set to stack so it will be the image then the text under it (instead of text over the image like on the desktop version.) I want the background to be white. But the text is white. So when you go on the mobile site, you wont be able to see the text because both the background and text is white. Is there a solution to this?

  2. Image with text section. Again, LOVE it on my desktop version. But it looks weird on the mobile version. I want the image to be bigger and I want it to be from one side of the screen to the other side. I dont want any white on the sides of the image. Kinda like the Image Banner. It stretches from one side to the next. Any solution to this?

Thanks so much for any assistance anyone can give.

My website is www.PennsylvaniaParks.org.

Thanks!

1 Like
2 
@media only screen and (max-width: 749px) {
.banner__text.caption-with-letter-spacing {
    color: #000 !important;
}
}

.image-with-text {
    padding: 0;
}

Add these two items to your CSS file and you should be good to go. You can change the color of the font by changing the #000 to which ever color you would like.

1 Like
3

Hi There! Thank you so much! That worked like a charm. One last question. How do I make the buttons with the image banner black with white text on mobile? Just like earlier, I don’t want to change the buttons on the desktop view, only on the mobile view. Thanks so much!

4

Of course, you can achieve this with the following code:

@media only screen and (max-width: 749px) {
.banner__text.caption-with-letter-spacing {
    color: #000 !important;
}
.image-with-text {
    padding: 0;
}
a.button.button--primary {
    background-color: #000;
}
}

a.button.button–primary is the CSS class you would want to change to change the font color for mobile only.

I also had a small issue with the old code that I fixed with this.

1 Like
5

Perfect… Thanks so much!

1 Like
6

You are very welcome, if you need any other assistance feel free to let me know. Here to help!