I am currently working on coding my portfolio and have designed the layout in Photoshop. Please note that this image is a reduced preview.
While trying to align the images and content, I encountered some challenges. I suspect there might be an issue with the overall structure?
The specific problems I faced are:
1- My main challenge is to align the text and the initial case UI screenshot within the div so that they appear on the bottom right initially. Then, when viewed on mobile, they should stack as one column below the text. I experimented with various techniques such as encapsulating the image with a div, setting positions to relative and absolute, using margins, floats, and alignments, but none of them worked as expected.
This was how the alignment problem looked like:
[![Trouble with image alignment][2]][2]
Below is a snippet of the HTML code:
<!-- start of case 1 -->
<div id="case1" class="row fullWidth">
<div class="small-6 medium-6 large-6 columns">
<div class="case1text">
<h2>A new class of real-time software<h2>
</div>
</div>
<div class="small-6 medium-6 large-6 columns">
<div class=case_image_container>
<img class="case_image" alt-check_content_below src="https://danielvianna.github.io/images/blacktrax_gui.png">
</div>
</div>
</div>
<!-- End of case 1-->
And here is a snippet of the CSS code related to this section:
#case1 {
/* Gradient background styles */
...
}
.case1text {
...
}
.case_image_container {
...
}
.case_image {
...
}
2- Another issue I faced was with the menu behavior. When opened on mobile devices, the menu pushes down the hero image instead of appearing on top as a separate layer, even after assigning z-index values to both elements.
Here is a preview of the problem:
Snippet of the HTML code for the menu section:
<!-- Start Top Menu Bar -->
...
<!-- end of Top Menu Bar -->
And here is a snippet of the CSS code relevant to the navigation bar:
.title-bar {
...
}
.top-bar-right {
...
}
...