Align h3 title with site title (Tablet, Mobile issue)

Hi,

I’d like to align the h3 title (parallax section for homepage) with the site title. I was able to achieve this using the following CSS:

.shapely_home_parallax h3 {
position: absolute;
top: -150px;
left: -95px;
padding: 10px;
}

However, when I view the website on tablets the position of the h3 title is messed up and on mobiles it is not showing up at all. I’ve tried to write the command “relative” but didn’t change anything.

Could you advise on this?

Cheers,
J

website: www.jonathangoldenberg.com

Hi,

I didn’t see any parallax widgets in the home page. By guessing with the CSS, you’re using absolute positioning to change the location of the texts, so use media querires to adjust the position in the tablet and mobile devices, for example for mobile use this css.

@media only screen 
  and (min-width: 320px) 
  and (max-width: 480px) {
    .shapely_home_parallax h3 {
position: absolute;
top: -15px;
left: -15px;
padding: 10px;
}
}

Adjust the top & left values. Also do the same for tablets by adjust the min and max width values. For more information: Media Queries for Standard Devices | CSS-Tricks

Let us know,

Thanks,
laranz.

That’s exactly what I was looking for!

Thanks a lot.
Have a great one,
J

Hi,

Glad it works :slight_smile:

Let us know if you have any other questions. If you’re happy with our service, don’t forget to review & rate us in WordPress [Shapely] Reviews | WordPress.org. :wink:

Thanks,
laranz.