Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Jessssica

Adjusting mobile version home page layout

Question

Site URL: http://www.jessicawisemanphotography.com

Hi, I am having a lot of trouble with the mobile version of my homepage. I had previous help on here with some code to get my logo large enough for the web version as well as to have to colour white on the home page and black on all other pages which all worked perfectly for the web version. However, the code has been applied to the mobile version too and the logo is simply too big for the mobile version. 

This is the code I have used so far......

.header-title-logo img { max-height: 3000px; max-width: 500px; }
.homepage .header-title-logo img {filter: invert(1);}

 

As you can see from the attached photos below the logo overlaps my page links and doesn't fit in the space. It would be nice to have it a bit smaller to fit and not overlapping. Im not sure if this is possible but I would also love the drop down menu to be higher, more towards the top corner of the page rather than on the side half way down. But honestly that isn't the ain priority right now. 

Any help would be appreciated! Thank you!! 

 

@tuanphan

IMG_2431.PNG

IMG_2432.JPG

IMG_2433.JPG

Share this post


Link to post

8 answers to this question

Recommended Posts

  • 0

Edit above code to

@media screen and (min-width:992px) {
.header-title-logo img { max-height: 3000px; max-width: 500px; }
.homepage .header-title-logo img {filter: invert(1);}
}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

@tuanphan Thank you so much for your help!! I have managed to get it the right size but now can't figure out code to invert the logo colour on the mobile version. I took a few guesses but honestly with no code knowledge I have no idea what I am really doing. Could you please advise how to invert the mobile logo just for the homepage too? Thank you in advance. 

Share this post


Link to post
  • 0
4 hours ago, Jessssica said:

@tuanphan Thank you so much for your help!! I have managed to get it the right size but now can't figure out code to invert the logo colour on the mobile version. I took a few guesses but honestly with no code knowledge I have no idea what I am really doing. Could you please advise how to invert the mobile logo just for the homepage too? Thank you in advance. 

@media screen and (max-width:767px) {
.homepage .header-title-logo img {filter: invert(1);}
}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
Posted (edited)
2 hours ago, tuanphan said:

@media screen and (max-width:767px) { .homepage .header-title-logo img {filter: invert(1);} }

Thanks Tuan, I don't know what I am doing wrong. I copied and pasted this in, and it appeared to work for a split second but now it doesn't. This is the whole code I have applied so far.... 

@media screen and (max-width:767px) {
.homepage .header-title-logo img {filter: invert(1);}
}
.header-title-logo img { max-height: 3000px; max-width: 500px; }
.homepage .header-title-logo img {filter: invert(1);}

Any clue where I went wrong? It still appears black on the mobile version. 

Edited by Jessssica

Share this post


Link to post
  • 0
26 minutes ago, Jessssica said:

Thanks Tuan, I don't know what I am doing wrong. I copied and pasted this in, and it appeared to work for a split second but now it doesn't. This is the whole code I have applied so far.... 

@media screen and (max-width:767px) {
.homepage .header-title-logo img {filter: invert(1);}
}
.header-title-logo img { max-height: 3000px; max-width: 500px; }
.homepage .header-title-logo img {filter: invert(1);}

Any clue where I went wrong? It still appears black on the mobile version. 

Quote

@media screen and (max-width:767px) {
.homepage .header-title-logo img {filter: invert(1);}
}
.header-title-logo img { max-height: 3000px; max-width: 500px; }
.homepage .header-title-logo img {filter: invert(1);}

remove big }


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

adjust this .header-title-logo img { max-height: 3000px; max-width: 500px; }


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

Thank you so much for all your help Tuan! Honestly could have done it without you! 🙂 I managed to figure it out and get it all working for both versions how I wanted. 

 

@media screen and (min-width:992px) {

  .header-title-logo img { max-height: 3000px; max-width: 500px; } }

.homepage .header-title-logo img {filter: invert(1);}

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...